您的位置: 首页  >  文章  >  百度地图API根据数据库经纬度显示多个标注点并去除百度地图logo

百度地图API根据数据库经纬度显示多个标注点并去除百度地图logo

分类: 文章 • 2024-02-04 21:19:52
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<%int ids = 0; %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" href="css/login1.css" rel="stylesheet">
    <link rel="stylesheet" href="css/jquery.treeview.css" />
<link rel="stylesheet" href="css/screen.css" />

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script language="javascript" src="js/pcasunzip.js" charset="utf-8"></script>

<!--引用百度地图API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

    .anchorBL{display:none;}

//去掉百度左下角logo添加这一句样式即可

</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">

//定义一个树状图的数组
var the_tree_arr = ([1,2,3,[1,2,3]],2,3);
function test(){
for(var i=0;i<the_tree_arr.length;i++){
alert(the_tree_arr[i]);
}
}
$(function() {

//alert("*********");
test();


//实现树状图切换显示的功能
$("#browser").treeview();


//添加树的节点
$("#add").click(function() {
var branches = $("<li><span class='folder'>New Sublist</span><ul>" + 
"<li><span class='file'>Item1</span></li>" + 
"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
$("#browser").treeview({
add: branches
});
branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21");
$("#browser").treeview({
add: branches
});
});
$("#browser").bind("contextmenu", function(event) {
if ($(event.target).is("li") || $(event.target).parents("li").length) {
$("#browser").treeview({
remove: $(event.target).parents("li").filter(":first")
});
return false;
}
});
})

</script>


<style type="text/css">
    head{
    
  font-family: "华文细黑";
  width: 100%;
  background-size: 100%;  
    }
    #top{
    width: 100%;
    height:70%
  font-family: "华文细黑";
  width: 100%;
  height:auto;
  background-size: 100%;  
    }
    #left{
    width: 19.85%;
    height: 160px;
    float: left;
    margin-left: 0;
    }
    .left-down{
    width: 19%;
    height: 54%;
    float: left;
    margin-left: 0;
    margin-top: 5px;
    }
    .foot{
    width:100%;
    height: 200px;
    margin-top: 50px;
margin-bottom: 20px;
float: left;
    }
    
    .foot p{
       color:#AAAAAA;
text-align:center;
font-size:20px;
letter-spacing:1px;
    }
    
    .foot a{
color:white;
text-decoration:none;
}
.foot a:hover{
text-decoration:underline;
}
</style>  
</head>
<body onload="getnow()">
<header>
    <div class="pic">


    </div>
    <div class="TiShi"><span id="timeSpan">管理员您好</span>，欢迎来到隧道施工安全智能监测系统</div>
    <div class="address">您现在的位置：<a href="index.jsp" target="_parent" ><span style="font-size: 20px;">隧道施工安全智能监测系统</span></a> &gt; 项目地图界面</div>
</header>
  <!--百度地图容器-->
  <div id="top">
  
            <div class="Map" id="baiduMap" style="width:79.8%;height:75%;border:#ccc solid 1px;right: 0; bottom: 0; float: right">  </div>
            <script type="text/javascript">  
            var markerAll = [];
            
            var Map = {};


            $(document).ready(function (){

                //ajax连接后台获取数据，这里我用的是servlet，后台将数据转换成json数组返回前台遍历

            $.ajax( {
            type : "POST",
            url : "querymakker",
            async: false, 
            cache : false,
            dataType: "json",//返回数据的类型

            success : function(json) {

             //json数组里有两个集合，根据所引进行遍历

            var data = json[0];
            var cai = json[1]；

                        Map = {//定义对象  
                                init: function(){  
                                    var map = new BMap.Map('baiduMap');//创建实例  
                                    var point = new BMap.Point(92.3447,29.795);//设立一个中心点坐标  
                                    map.centerAndZoom(point,4);//初始化并且设立级别，百度只提供17个级别3-18，此处50km  
                                    map.enableScrollWheelZoom(true);//**滚轮操作  
              
                                    //添加控件  
                                    var ctrlNav = new window.BMap.NavigationControl({  
                                        anchor: BMAP_ANCHOR_TOP_LEFT,  
                                        type: BMAP_NAVIGATION_CONTROL_LARGE  
                                    });  
                                    map.addControl(ctrlNav);//缩放  
              
                                    var ctrlOva = new window.BMap.OverviewMapControl({  
                                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
                                        isOpen: 1  
                                    });  
                                    map.addControl(ctrlOva);//缩略图  
              
                                    var ctrlSca = new window.BMap.ScaleControl({  
                                        anchor: BMAP_ANCHOR_BOTTOM_LEFT  
                                    });  
                                    map.addControl(ctrlSca);//比例尺  
              
                                    var point = new Array();//定义数组标注经纬信息  
              
                                    var marker = new Array();//定义数组点对象信息  
              
                                    var info = new Array();//定义悬浮提示信息  
              
                                    for(var i = 0; i < data.length; i++){//遍历  
                                        var infoA = data[i].jingdu;//分割|  
                                        var infoB = data[i].weidu;  
                                        var xiangmu = data[i].name;
                                        markerArr = [//地址数据  
                                            {title:data[i].name,content:"项目标记",point:data[i].jingdu+"|"+data[i].weidu,jingdu:data[i].jingdu,weidu:data[i].weidu}
                                        ] 
              
                                        point[i] = new window.BMap.Point(infoA,infoB);  
              
                                        marker[i] = new window.BMap.Marker(point[i]);  
              
                                        map.addOverlay(marker[i]);  
                                        marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); 
                                        
                                        var _marker = marker[i];
                                                                                                                       
                                        var label = new window.BMap.Label(data[i].name,{offset: new window.BMap.Size(20,-10)});  
                                        marker[i].setLabel(label);  
              
                                        info[i] = new window.BMap.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + data[i].name + "</br>经度：" + data[i].jingdu + "</br> 纬度：" + data[i].weidu+"</br> 一级行政：" + data[i].province + "</br> 二级行政：" + data[i].city + "</br> 三级行政：" + data[i].area + "</p>");//悬浮提示信息
                                        
                                        for(var a = 0 ; a < cai.length ; a++){
                                        if(data[i].name == cai[a].xiangmu){
                                        var shebei = cai[a].shename;
                                        marker[i].addEventListener("click",function(){
                                window.location.href="querydingwei?shebei="+shebei+""; 
                        });
                                        }
                                        }
                                        
                                    marker[0].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[0]);//悬浮监听提示方法  
                                   });  
                                    }
                                    marker[1].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[1]);//悬浮监听提示方法  
                                    });  
                                    marker[2].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[2]);//悬浮监听提示方法  
                                    });  
                                    marker[3].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[3]);//悬浮监听提示方法  
                                    });   
                                    marker[4].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[4]);//悬浮监听提示方法  
                                    });   
                                    marker[5].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[5]);//悬浮监听提示方法  
                                    });   
                                    marker[6].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[6]);//悬浮监听提示方法  
                                    });   
                                    marker[7].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[7]);//悬浮监听提示方法  
                                    });   
                                    marker[8].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[8]);//悬浮监听提示方法  
                                    });   
                                    marker[9].addEventListener("mouseover",function(){  
                                        this.openInfoWindow(info[9]);//悬浮监听提示方法  
                                    });   
                                },  
                                
                                load_map: function(){//异步回调  
                                    var load = document.createElement("script");  
                                    load.src = "http://api.map.baidu.com/api?v=1.4&callback=Map.init";  
                                    document.body.appendChild(load);  
                                }  
              
                            };  
           
                        Map.load_map();//实例化调用函数      
           


            },
           
            error : function() {
            alert('出错！');
            return false;
            }
           
            });
            });
      
</script>
<script type="text/javascript">
$(document).ready(function (){
    
var add1 = document.getElementsByName("user.province")[0].value;
var add2 = document.getElementsByName("user.city")[0].value;
var add3 = document.getElementsByName("user.area")[0].value;
$.ajax( {
type : "POST",
url : "queryxiangmu1",
async: true, 
cache : false,
data : {add1:add1,add2:add2,add3:add3},
success : function() {
    $("#mokei").empty();
    $("#mokei").append(
    "<ul id='browser' class='filetree'>"+
    "<c:forEach items='${listjians}' var='listjians'>"+
    "<li><span class='folder'>${listjians.name}</span>"+
      "<ul id='folder'>"+
      "<c:forEach items='${listcais}' var='listcais'>"+
               "<c:if test='${listjians.name == listcais.xiangmu}'>"+
    "<li><span class='folder'><a href='querydingwei?shebei=${listcais.shename}'>${listcais.shename}</a></span>"+
    "<ul id='folder21'>"+
    "<c:forEach items='${listtongs}' var='listtongs'>"+
    "<c:if test='${listcais.shema == listtongs.shema}'>"+
    "<li><span class='file'>${listtongs.tongname}</span></li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:forEach>"+
    "</ul>"
    );
    test2();
    return false;
},

error : function() {
alert('出错！');
return false;
}

});
});


var the_tree_arr = ([1,2,3,[1,2,3]],2,3);
function test(){
for(var i=0;i<the_tree_arr.length;i++){
alert(the_tree_arr[i]);
}
}
function test2() {

//alert("*********");
test();
//实现树状图切换显示的功能
$("#browser").treeview();

//添加树的节点
$("#add").click(function() {
var branches = $("<li><span class='folder'>New Sublist</span><ul>" + 
"<li><span class='file'>Item1</span></li>" + 
"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
$("#browser").treeview({
add: branches
});
branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21");
$("#browser").treeview({
add: branches
});
});
$("#browser").bind("contextmenu", function(event) {
if ($(event.target).is("li") || $(event.target).parents("li").length) {
$("#browser").treeview({
remove: $(event.target).parents("li").filter(":first")
});
return false;
}
});
};
</script>
<script type="text/javascript">


var the_tree_arr = ([1,2,3,[1,2,3]],2,3);
function test(){
for(var i=0;i<the_tree_arr.length;i++){
alert(the_tree_arr[i]);
}
}
function test2() {

//alert("*********");
test();
//实现树状图切换显示的功能
$("#browser").treeview();

//添加树的节点
$("#add").click(function() {
var branches = $("<li><span class='folder'>New Sublist</span><ul>" + 
"<li><span class='file'>Item1</span></li>" + 
"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
$("#browser").treeview({
add: branches
});
branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21");
$("#browser").treeview({
add: branches
});
});
$("#browser").bind("contextmenu", function(event) {
if ($(event.target).is("li") || $(event.target).parents("li").length) {
$("#browser").treeview({
remove: $(event.target).parents("li").filter(":first")
});
return false;
}
});
};

$(document).ready(function (){


$("#test2").click(function () {
var add1 = document.getElementsByName("user.province")[0].value;
var add2 = document.getElementsByName("user.city")[0].value;
var add3 = document.getElementsByName("user.area")[0].value;


$.ajax( {
type : "POST",
url : "queryxiangmu1",
async: false, 
cache : false,
data : {add1:add1,add2:add2,add3:add3},
success : function() {
alert("成功");
    $("#mokei").empty();
    if(add1=='广东省' && add2=='清远市' && add3=='清新县'){
    $("#mokei").append(
    "<ul id='browser' class='filetree'>"+
    "<c:forEach items='${listjians}' var='listjians'>"+
                    "<c:if test = '${listjians.province eq "广东省" && listjians.city eq "清远市" && listjians.area eq "清新县"}'>"+
    "<li><span class='folder'>${listjians.name}</span>"+
      "<ul id='folder'>"+
      "<c:forEach items='${listcais}' var='listcais'>"+
               "<c:if test='${listjians.name == listcais.xiangmu}'>"+
    "<li><span class='folder'><a href='querydingwei?shebei=${listcais.shename}'>${listcais.shename}</a></span>"+
    "<ul id='folder21'>"+
    "<c:forEach items='${listtongs}' var='listtongs'>"+
    "<c:if test='${listcais.shema == listtongs.shema}'>"+
    "<li><span class='file'>${listtongs.tongname}</span></li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"
    );
   test2();
       
    return false;
    }
    if(add1=='西藏自治区' && add2=='拉萨市' && add3=='达孜县'){
    $("#mokei").append(
    "<ul id='browser' class='filetree'>"+
    "<c:forEach items='${listjians}' var='listjians'>"+
                    "<c:if test = '${listjians.province eq "西藏自治区" && listjians.city eq "拉萨市" && listjians.area eq "达孜县"}'>"+
    "<li><span class='folder'>${listjians.name}</span>"+
      "<ul id='folder'>"+
      "<c:forEach items='${listcais}' var='listcais'>"+
               "<c:if test='${listjians.name == listcais.xiangmu}'>"+
    "<li><span class='folder'><a href='querydingwei?shebei=${listcais.shename}'>${listcais.shename}</a></span>"+
    "<ul id='folder21'>"+
    "<c:forEach items='${listtongs}' var='listtongs'>"+
    "<c:if test='${listcais.shema == listtongs.shema}'>"+
    "<li><span class='file'>${listtongs.tongname}</span></li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"
    );
   test2();
       
    return false;
    }
    if(add1=='浙江省' && add2=='宁波市' && add3=='鄞州区'){
    $("#mokei").append(
    "<ul id='browser' class='filetree'>"+
    "<c:forEach items='${listjians}' var='listjians'>"+
                    "<c:if test = '${listjians.province eq "浙江省" && listjians.city eq "宁波市" && listjians.area eq "鄞州区"}'>"+
    "<li><span class='folder'>${listjians.name}</span>"+
      "<ul id='folder'>"+
      "<c:forEach items='${listcais}' var='listcais'>"+
               "<c:if test='${listjians.name == listcais.xiangmu}'>"+
    "<li><span class='folder'><a href='querydingwei?shebei=${listcais.shename}'>${listcais.shename}</a></span>"+
    "<ul id='folder21'>"+
    "<c:forEach items='${listtongs}' var='listtongs'>"+
    "<c:if test='${listcais.shema == listtongs.shema}'>"+
    "<li><span class='file'>${listtongs.tongname}</span></li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"+
    "</li>"+
    "</c:if>"+
    "</c:forEach>"+
    "</ul>"
    );
   test2();
       
    return false;
    }
},
error : function() {
alert('出错！');
return false;
}
});
});

});



</script>




      <div id="left" >
      <form id="passForm" style="border:1px solid orange; padding:1px;">
<fieldset style="padding:5px; font-size: 16px;">
<legend class="text" style="font-size: 20px;">项目地址：</legend>
一    级   行    政：              <select name="user.province" id="province" style="font-size: 16px; margin-left: 0; width: 100px; "></select><br>百度地图API根据数据库经纬度显示多个标注点并去除百度地图logo
二   级   行    政： <select name="user.city" id="city" style="font-size: 16px; margin-left: 0; width: 100px; "></select><br>
三   级   行    政： <select name="user.area" id="area" style="font-size: 16px; margin-left: 0; width: 100px; "></select><br>
<input type="button" id="test2" value="项目查询" style="width: 100px; height: 30px; margin-top: 5px; font-size: 16px;"/>
</fieldset>
</form>
<script language="javascript" defer>
new PCAS("user.province","user.city","user.area","广东省","清远市","清新县");
</script>
</div>


<div class="left-down" style="max-height:55%; LINE-HEIGHT: 20px; OVERFLOW: auto; " style="border:1px solid orange; padding:1px;" id="mokei"> 

</div>
      </div>
      <div class="foot" style="background-color: #0000FF; width: 100%; height: 8%; text-align: center;">
      <hr style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>
        <p>
Copyright 2018　*************** 版权所有|***********提供技术支持<br>
         Email:[email protected]|联系电话:12345678910 
       </p>
      </div>
      </body>
</html>
            </div>  
  
        </div>  
    </body>  

</html> 

//效果就是上面的图片，而且标注点是动的哦

//欢迎各路大神来讨论，感激不尽百度地图API根据数据库经纬度显示多个标注点并去除百度地图logo百度地图API根据数据库经纬度显示多个标注点并去除百度地图logo


相关推荐