百度地图爬坑路

1. 多边形覆盖物在移动端点击事件触发不了问题

解决方案：由于绘制的多边形 polygon直接监听 polygon.addEventListener("click", ()=>) 移动端上事件不触发，所以在popInfo上添加个字段区分，map上监听事件可以获取所添加的字段，然后赋值

<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);    // 创建点坐标
  map.centerAndZoom(point,13);                    // 初始化地图,设置中心点坐标和地图级别。
// 网格监听点击事件（这个是重点）
  map.getPanes().floatPane;
  map.addEventListener("click", e => {
    if (e.overlay && e.overlay.popInfo) {
          polygonMarker(e.overlay.popInfo);
     }
});
// 绘制网格
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(); // 判断上一个窗体是否存在，若存在则执行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>网格名称：</span><span>${name || ''}</span></li>
          <li><span>承接组织：</span><span>${org || ''}</span></li>
          <li><span>网格组长：</span><span>${user || ''}</span></li>
          <li><span>联系方式：</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. 移动端弹窗关闭不了（解决方案：禁止地图拖动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);  // 创建标注
  map.addOverlay(marker);              // 将标注添加到地图中
  map.centerAndZoom(point, 15);
  var html = "<div class='infoBoxContent '><h3>哈哈哈公司</h3><hr /><div><p>所属部门：研发部门</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: 触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动，但是可以触发拖动事件。
  map.addEventListener("touchmove", function (e) {
       map.enableDragging();
  });
   // TODO: 触摸结束时触发次此事件  此时开启禁止拖动
   map.addEventListener("touchend", function (e) {
        map.disableDragging();
   });
 
  // 初始化地图 禁止拖动   注：虽禁止拖动，但是可以出发拖动事件
  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);  // 创建标注
  map.addOverlay(marker);              // 将标注添加到地图中
  map.centerAndZoom(point, 15);
  var html = "<div class='infoBoxContent '><h3>哈哈哈公司</h3><hr /><div><p>所属部门：研发部门</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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容