1. 多邊形覆蓋物在移動端點擊事件觸發(fā)不了問題
解決方案：由于繪制的多邊形 polygon直接監(jiān)聽 polygon.addEventListener("click", ()=>) 移動端上事件不觸發(fā)，所以在popInfo上添加個字段區(qū)分饶唤，map上監(jiān)聽事件可以獲取所添加的字段叨咖，然后賦值
<html>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>百度地圖繪制多邊形</title>
</head>
<body>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3"></script>
<script type="text/javascript">
var map;
window.lastInfoBox = null;
let markStyle = {
boxStyle: {
opacity: '0.9',
background: 'rgba(0,43,112,.9)',
borderRadius: '10px',
height: 'auto',
padding: '20px',
fontSize: '14px',
lineHeight: '22px',
color: '#f8f8f8',
boxShadow: '0px 2px 10px 10px rgba(0, 0, 0, 0.2)'
},
closeIconUrl: require('@/assets/images/track-display-close.png'),
closeIconMargin: '-30px -15px 0px 0',
enableAutoPan: true
};
function initialize() {
// 百度地圖API功能
map = new BMap.Map("map_canvas", { enableMapClick: false, mapType: mapSelect === '2d' ? BMAP_NORMAL_MAP : BMAP_SATELLITE_MAP, drawMargin: 100, drawer: BMAP_SVG_DRAWER_FIRST });
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
map.enableScrollWheelZoom(); //啟用滾輪放大縮小
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setMapType(BMAP_SATELLITE_MAP);
var point = new BMap.Point(108.896, 34.330); // 創(chuàng)建點坐標
map.centerAndZoom(point,13); // 初始化地圖,設置中心點坐標和地圖級別。
// 網(wǎng)格監(jiān)聽點擊事件（這個是重點）
map.getPanes().floatPane;
map.addEventListener("click", e => {
if (e.overlay && e.overlay.popInfo) {
polygonMarker(e.overlay.popInfo);
}
});
// 繪制網(wǎng)格
setPolygonMarker () {
const data = [
[108.853025, 34.298633],
[108.85475, 34.318075],
[108.856475, 34.319744],
[108.85245, 34.343354]
]
const pol = data.map(v => new BMap.Point(v[0], v[1]));
var polygon = new BMap.Polygon(pol,
{strokeColor:"#f50704",fillColor:"", strokeWeight:3, strokeOpacity:0,fillOpacity:0}
);
polygon.popInfo = data; // 添加字段（這個是重點）
map.addOverlay(polygon);
}
polygonMarker(data){
markStyle = Object.assign(markStyle, { offset: new BMap.Size(0, -40) });
let infoWindow = new BMapLib.InfoBox(map, detailGridHTML(data.name, data.org, data.user,
data.contact), markStyle);
const marker = new BMap.Marker(new BMap.Point(data.coordinates[0][0], data.coordinates[0][1]));
if (lastInfoBox) lastInfoBox.close(); // 判斷上一個窗體是否存在盲镶，若存在則執(zhí)行close
lastInfoBox = infoWindow;
infoWindow.open(marker);
if (!store.state.isPCDevice) this.map.disableDragging(); // 如果是移動端禁止拖動
}
detailGridHTML (name, org, user, contact) {
let html = `
<div class="monitor-map-info-window--flex">
<div class="monitor-map-info-window">
<ul>
<li><span>網(wǎng)格名稱：</span><span>${name || ''}</span></li>
<li><span>承接組織：</span><span>${org || ''}</span></li>
<li><span>網(wǎng)格組長：</span><span>${user || ''}</span></li>
<li><span>聯(lián)系方式：</span><span>${contact || ''}</span></li>
</ul>
</div>
</div>
`;
return html;
};
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
2. 移動端彈窗關(guān)閉不了（解決方案：禁止地圖拖動map.disableDragging()）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{width:100%;height:100%;}
.infoBoxContent{
margin:20px;
}
.infoBoxContent button{
background-color: #008CBA;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 16px;
width: 120px;
}
.infoBoxContent h3{
color: white;
}
.infoBoxContent p{
color:white;
}
.infoBoxContent:before {
content: '';
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #333333;
position: absolute;
left: 50%;
top: 100%;
margin-left: -20px;
}
</style>
<title>自定義彈窗</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1H8Dhi2pGmOMYbN4EcaAGr1rv8f7Gmjz"></script>
<script type="text/javascript" src="lib/InfoBox.js"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.setMapStyle({style:'midnight'});
var point = new BMap.Point(116.417854,39.921988);
var marker = new BMap.Marker(point); // 創(chuàng)建標注
map.addOverlay(marker); // 將標注添加到地圖中
map.centerAndZoom(point, 15);
var html = "<div class='infoBoxContent '><h3>哈哈哈公司</h3><hr /><div><p>所屬部門：研發(fā)部門</p>" +
"<p>主要工作：制造BUG</p><div align=\"center\"><button>我是按鈕</button></div></div></div>";
var infoBox = new BMapLib.InfoBox(map,html,{
boxStyle:{
opacity: "0.8",
background: "#333333",
width: "250px",
height: "200px"
},
closeIconUrl:"lib/close.png",
closeIconMargin: "1px 1px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
marker.addEventListener("click", function(){
infoBox.open(marker);
// TODO: 觸摸移動時觸發(fā)此事件 此時開啟可以拖動子库。雖然剛初始化該地圖不可以拖動睬涧，但是可以觸發(fā)拖動事件募胃。
map.addEventListener("touchmove", function (e) {
map.enableDragging();
});
// TODO: 觸摸結(jié)束時觸發(fā)次此事件 此時開啟禁止拖動
map.addEventListener("touchend", function (e) {
map.disableDragging();
});
// 初始化地圖 禁止拖動 注：雖禁止拖動，但是可以出發(fā)拖動事件
map.disableDragging();
map.enableScrollWheelZoom(true);
});
</script>
3.基于BMapLib.InfoBox自定義彈窗
image.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{width:100%;height:100%;}
.infoBoxContent{
margin:20px;
}
.infoBoxContent button{
background-color: #008CBA;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 16px;
width: 120px;
}
.infoBoxContent h3{
color: white;
}
.infoBoxContent p{
color:white;
}
.infoBoxContent:before {
content: '';
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #333333;
position: absolute;
left: 50%;
top: 100%;
margin-left: -20px;
}
</style>
<title>自定義彈窗</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1H8Dhi2pGmOMYbN4EcaAGr1rv8f7Gmjz"></script>
<script type="text/javascript" src="lib/InfoBox.js"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.setMapStyle({style:'midnight'});
var point = new BMap.Point(116.417854,39.921988);
var marker = new BMap.Marker(point); // 創(chuàng)建標注
map.addOverlay(marker); // 將標注添加到地圖中
map.centerAndZoom(point, 15);
var html = "<div class='infoBoxContent '><h3>哈哈哈公司</h3><hr /><div><p>所屬部門：研發(fā)部門</p>" +
"<p>主要工作：制造BUG</p><div align=\"center\"><button>我是按鈕</button></div></div></div>";
var infoBox = new BMapLib.InfoBox(map,html,{
boxStyle:{
opacity: "0.8",
background: "#333333",
width: "250px",
height: "200px"
},
closeIconUrl:"lib/close.png",
closeIconMargin: "1px 1px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
marker.addEventListener("click", function(){
infoBox.open(marker);
});
</script>
