百度地圖行政區劃遮罩+描點+資訊窗demo
阿新 • • 發佈:2019-02-01
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map例項
var boundary = ["石家莊市裕華區","石家莊市新華區","石家莊市橋西區","石家莊市長安區"];
var color = ["#FFD700","#FF83FA","#FF0000","#FF4500"];
var address = ["石家莊市鐵道大學","石家莊市物聯網大廈","石家莊科技中心","石家莊植物園","石家莊市裕華區南二環東路河北師範大學"];
map.centerAndZoom(new BMap.Point(114.527 , 38.071), 13); // 初始化地圖,設定中心點座標和地圖級別
//map.centerAndZoom("河北", 9); // 初始化地圖,第一個引數可以使用中心點座標,也可以使用城市名稱;第二個引數為地圖級別
//新增地圖型別控制元件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
//map.setCurrentCity("北京"); // 百度註釋(設定地圖顯示的城市 此項是必須設定的 ) 不設定也不影響地圖顯示,不知道具體作用
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
for (var i = 0; i < boundary.length; i++) {
getBoundary(boundary[i],color[i]); //行政區劃覆蓋遮罩
}
for (var j = 0; j < address.length; j++) {
getPoint(address[j]); //地圖描點
}
//點聚合
/* var markers = [];
for (var i = 0; i < 10; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
markers.push(new BMap.Marker(pt));
}
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers}); */
//單擊獲取點選的經緯度
/* map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
}); */
function getBoundary(area,color){
var bdary = new BMap.Boundary();
bdary.get(area, function(rs){ //獲取行政區域
//map.clearOverlays(); //清除地圖覆蓋物
var count = rs.boundaries.length; //行政區域的點有多少個
if (count === 0) {
alert('未能獲取當前輸入行政區域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeColor:"green",fillColor: color ,fillOpacity:"0.3",strokeOpacity:0.3,strokeWeight: 2}); //建立多邊形覆蓋物
map.addOverlay(ply); //新增覆蓋物
pointArray = pointArray.concat(ply.getPath());
}
//map.setViewport(pointArray); //調整視野
});
}
// 將地址解析結果顯示在地圖上,並調整地圖視野
function getPoint(address) {
// 建立地址解析器例項
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function(point){
if (point) {
//map.centerAndZoom(point, 16);
var marker = new BMap.Marker(point);
map.addOverlay(marker); //描點
var opts = {
width : 280, // 資訊視窗寬度
height: 150, // 資訊視窗高度
title : "<span class='content'>詳細資訊</span>" , // 資訊視窗標題
}
var infoWindow = new BMap.InfoWindow("<font class='content'>地址:"+address+"<br/>座標:"+point.lng+"," +point.lat+
"<br/><a href='javascript:void(0)' onclick='alert(\"啦啦啦!!!\")' style='font-size:18px;color:blue;text-decoration:underline;'>點選有驚喜!!!</a></font>"
,opts); //建立資訊視窗物件
//滑鼠點選事件
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //開啟資訊視窗
//map.centerAndZoom(point,14);
});
//滑鼠移入事件
/* marker.addEventListener("mouseover", function(){
map.openInfoWindow(infoWindow,point); //開啟資訊視窗
}); */
}else{
alert("您選擇地址沒有解析到結果!");
}
}, "石家莊市");
}