百度地圖API 海量點自定義添加信息

時間 2019-11-13

原文原文鏈接

<!--添加百度地圖-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰"></script>
<script src="../../public/js/GetURLParam.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 

//html代碼

 

<body onload="init()">
<form id="form1" runat="server">
<div style="width:100%" id="container"></div>
</div>
</form>
</body>

 

 

//關鍵代碼

<script>
//默認最大
$(document).ready(function(){
var height=GetURLParam("height");
if(height!=null&&height!="undefined"&&height!=""){
$("#container").css("height",height+"px");
}
else{
$("#container").css("height",$(document.body).height());
}
});
var init = function() {
var bumenid =document.getElementById("hiddText").value; //部門id
var typeid =document.getElementById("selType").value; //類型id
if("<%=scvalue %>"==1){ //首次加載
bumenid=-1;
} 
var map = new BMap.Map("container", {}); // 建立Map實例
map.centerAndZoom(new BMap.Point(113.376170,22.521573), 5); // 初始化地圖,設置中心點座標和地圖級別
map.enableScrollWheelZoom(); //啓用滾輪放大縮小
if (document.createElement(‘canvas‘).getContext) { // 判斷當前瀏覽器是否支持繪製海量點
$.ajax({
url:‘/CompanyUser/Action.ashx?Action=OA_Map_InfoHaiXiang&ID=‘+bumenid+"&typeid="+typeid,//帶參通常處理程序
type:‘POST‘,
dataType:‘html‘,
contentType:"application/json; charset=utf-8",
error:function(XMLHttpRequest, textStatus, errorThrown){parent.error("系統建議管理(提交單)數據加載錯誤");},
success:function(result){
if(result!=""){
var data=eval("("+result+")"); //result 相似這種 [[經度,維度,1]] 這個1 我始終不明白是什麼 
var points = []; // 添加海量點數據
for (var i = 0; i < data.length; i++) {
points.push(new BMap.Point(data[i][0],data[i][1]));
}
var options = {
size: BMAP_POINT_SIZE_SMALL,
shape: BMAP_POINT_SHAPE_STAR,
color: ‘#d340c3‘
}
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
pointCollection.addEventListener(‘click‘, function (e) {
var Name="";//名稱
var ads="";//地址
var tel="";//電話
//關於自定義信息 修改json [[經度,維度,1,名稱,地址,電話]]
//循環查出值
for (var i = 0; i < data.length; i++) {
points.push(new BMap.Point(data[i][0],data[i][1]));
if(data[i][0]==e.point.lng&&data[i][1]==e.point.lat){//經度==點擊的,維度
Name=data[i][3];
ads=data[i][4];
tel=data[i][5];
break;
}
}
var point = new BMap.Point(e.point.lng, e.point.lat);
var opts = {
width: 250, // 信息窗口寬度
height: 70, // 信息窗口高度
title:"", // 信息窗口標題
enableMessage: false,//設置容許信息窗發送短息
}
var infowindow = new BMap.InfoWindow("名稱:"+Name+"<br/>地址:"+ads+"<br/>電話:"+tel, opts);
map.openInfoWindow(infowindow, point);
});
map.addOverlay(pointCollection); // 添加Overlay

}
}
}); 
} else {
alert(‘請在chrome、safari、IE8+以上瀏覽器查看本示例‘);
}
}
</script>