vue项目之百度地图

原创 牛粪 随笔 js 266阅读 2018-04-04 16:56:38 举报
代码有不规范的地方还望多多包含。欢迎私信

项目需求:
    在地图上标记附近的门店,
    点击标记物弹出覆盖物,
    点击覆盖物切换到对应的门店,

1,script标签引入
     <script src="http://api.map.baidu.com/api?v=2.0&amp;ak=密钥"></script>

2,使用
    html节点添加id>>>
    <div id="container"></div>

    js>>>>
    let [lng,lat,city,list] = [114.0259736573215,22.546053546205247,'深圳',[...]]
     // 创建Map实例
     let map = new BMap.Map("container",{enableMapClick:true});

     // 初始化地图,设置中心点坐标和地图级别
     map.centerAndZoom(new BMap.Point( lng,lat ), 15);

     // 添加地图类型控件
     map.addControl(new BMap.MapTypeControl());     //地图,卫星,三维切换控件

     // 设置地图显示的城市 此项是必须设置的
     map.setCurrentCity(city);

     // 开启鼠标滚轮缩放
     map.enableScrollWheelZoom(true);

     //监听拖拽地图  
      map.addEventListener('dragend',(e)=>{
             console.log(e)
      })

     //比例尺控件 右下角
     map.addControl(new BMap.ScaleControl({
              anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
              offset:new BMap.Size(1,1)
     }));

     //点击回到当前位置
     let geolocationControl = new BMap.GeolocationControl();
     geolocationControl.addEventListener("locationSuccess", (e)=>{
     // 定位成功事件
     console.log(e)
     });
     geolocationControl.addEventListener("locationError",(e)=>{
     // 定位失败事件
     });
     map.addControl(geolocationControl);

     //在地图上添加门店标记点和相应门店信息覆盖物 
     for(var i = 0; i < list.length; i++) {    //循环门店列表信息展示坐标点
        //list为列表数据 包含shopName,addrInfo,telephone,longitude,latitude
         let p0 = list[i].longitude;
         let p1 = list[i].latitude;
         let maker = addMarker(map,new window.BMap.Point(p0, p1), i);
         addInfoWindow(maker, list[i], i);
      }

      //在地图上添加标记
      addMarker(map,point, index) {    //地图门店标记点
          let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
          new BMap.Size(23, 25), {
              offset: new BMap.Size(10, 25),
              imageOffset: new BMap.Size(0, -275)
          });
          let marker = new BMap.Marker(point, {    //创建标记点
              icon: myIcon
          });
          map.addOverlay(marker);
          return marker;
      }

      //在相应标记 处添覆盖
      addInfoWindow(marker, poi) {    //地图覆盖物显示设置
          let html = [];
          //pop弹窗标题 
          let title = `<div style="font-weight:bold;color:#CE5521;font-size:14px">${poi.shopName}</div>`;
          //pop弹窗信息 
          html.push(`<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>`);
          html.push(`<tr>`);
          html.push(`<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all;color:#000;">地址:</td>`);
          html.push(`<td style="vertical-align:top;line-height:16px;color:#000;">${poi.addrInfo}</td>`);
          html.push(`</tr>`);
          html.push(`<tr>`);
          html.push(`<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all;color:#000;">电话:</td>`);
          html.push(`<td style="vertical-align:top;line-height:16px;color:#000;">${poi.telephone}</td>`);
          html.push(`</tr>`);
          html.push(`</tbody></table>`);
          var infoWindow = new BMap.InfoWindow(html.join(""), {
              title: title,
              width: 200
          });
          html.onclick = function(){
              that.toDetail(poi.shopName,poi.shopNo);
          }
          var openInfoWinFun = function() {
              marker.openInfoWindow(infoWindow);
          };
          marker.addEventListener("click", openInfoWinFun);
          return openInfoWinFun;
      }
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复