百度地圖添加打點(diǎn)、鼠標(biāo)浮動(dòng)等操作

后臺(tái)返回查詢企業(yè)數(shù)據(jù)，需要在左側(cè)百度地圖上進(jìn)行企業(yè)打點(diǎn)，鼠標(biāo)浮動(dòng)展示企業(yè)名稱。因?yàn)橐呀?jīng)完成企業(yè)數(shù)據(jù)根據(jù)距離封裝和列表展示，所以在此基礎(chǔ)上循環(huán)數(shù)據(jù)，實(shí)現(xiàn)：
1、在地圖上進(jìn)行打點(diǎn)
2、以中心點(diǎn)分別在20、50、100、100外畫(huà)圓
3、鼠標(biāo)浮動(dòng)顯示企業(yè)名稱

首先引入百度地圖：新增map.js，代碼如下：

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.onload = function () {
      resolve(BMap)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

在文件中添加：

import {MP} from '@/api/map.js'
let map = null,
    geoc = null;

 export default {
    name: 'TestBaiDu',
    data() {
      return {
        ak:'你的AK',
        }
      };
    mounted(){
      this.$nextTick(() => {
        const _this = this
        MP(_this.ak).then(BMap => {
          _this.mapBuild()
        })
      })
    },
    created() {
      this.mapBuild()
    },
   methods: {
       mapBuild() {
        let that = this;
        this.dialogMap = !this.dialogMap;
        setTimeout(function() {
          if (that.mapGetshow) {
            map = new BMap.Map("container");
            geoc = new BMap.Geocoder();
            let point = new BMap.Point(116.46, 39.92);
            map.centerAndZoom(point, 10);
            map.enableScrollWheelZoom();
            var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
            map.addControl(scaleCtrl);
            // var zoomCtrl = new BMap.ZoomControl();  // 添加比例尺控件
            // map.addControl(zoomCtrl);
            var geolocation = new BMap.Geolocation();
            //定位
            geolocation.getCurrentPosition(
              r => {
                console.log(r);
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                geoc.getLocation(r.point, function(rs) {
                  var addComp = rs.addressComponents;
                  console.log(addComp);
                  that.mapPointName =
                    addComp.province +
                    addComp.city +
                    addComp.district +
                    addComp.street +
                    addComp.streetNumber;
                  that.loading = false;
                  that.mapGetshow = false;
                });
              },
              { enableHighAccuracy: true }
            );
            //鼠標(biāo)點(diǎn)擊
            map.addEventListener("click", function(e) {console.log(that.listQuery)
              //必選條件都選擇選項(xiàng)后傳參
              // if(that.listQuery.incident == "" ||that.listQuery.large == "" ||that.listQuery.medium == "" ||that.listQuery.small == "" ){
              //   alert("請(qǐng)選擇查詢條件！")
              // }else{
                console.log(e);
                var pt = e.point;
                var marker = new BMap.Marker(pt); // 創(chuàng)建標(biāo)注
                map.clearOverlays();
                map.addOverlay(marker);
               // 繪制圓
                var circle = new BMap.Circle(e.point, 20000, { //半徑為20公里圓
                  strokeColor: "blue",
                  strokeWeight: 2,
                  strokeOpacity: 0.5,
                  fillOpacity: 0,
                  fillColor:"",
                });
                var circle1 = new BMap.Circle(e.point, 50000, { //半徑為5-公里圓
                  strokeColor: "red", //顏色
                  strokeWeight: 2,
                  strokeOpacity: 0.5,
                  fillOpacity: 0,
                  fillColor:"",
                });
                var circle2 = new BMap.Circle(e.point, 100000, { //半徑為100公里圓
                  strokeColor: "#00aeee", //顏色
                  strokeWeight: 2,
                  strokeOpacity: 0.5,
                  fillOpacity: 0,
                  fillColor:"",
                });
                map.addOverlay(circle);
                map.addOverlay(circle1);
                map.addOverlay(circle2);
                geoc.getLocation(pt, function(rs) {
                  var addComp = rs.addressComponents;
                  that.street =  addComp.street
                  console.log(addComp);
                  that.mapPointName =
                    addComp.province +
                    addComp.city +
                    addComp.district +
                    addComp.street +
                    addComp.streetNumber;
                  that.dispatch.lon = e.point.lat
                  that.dispatch.lat = e.point.lng
                  findTableInfo(that.dispatch).then(response => {console.log(response.data)
                    that.companyList.company20 = response.data[0];
                    that.companyList.company50 = response.data[1];
                    that.companyList.company100 = response.data[2];
                    that.companyList.company200 = response.data[3];
                    that.num = [response.data[0].length,response.data[1].length,response.data[2].length,response.data[3].length]
                    if(response.data[0].length !== 0){
                      let inNum1=0;
                      response.data[0].forEach(e =>{
                        inNum1 += e.demandCapacity
                        //map打點(diǎn)
                        let myIcon  = new BMap.Icon(
                          require("../../assets/image/pointBlue.png"),
                          new BMap.Size(20, 20)
                        );
                        myIcon.setImageSize(new BMap.Size(20,20));//設(shè)置圖標(biāo)大小
                        var pt = new BMap.Point(e.lat, e.lon);
                        var marker = new BMap.Marker(pt, { icon: myIcon });  // 創(chuàng)建標(biāo)注
                        map.addOverlay(marker);              // 將標(biāo)注添加到地圖中
                        //設(shè)置彈出框
                        var opts = {
                          // position : pt,
                          width : 280,     // 信息窗口寬度
                          height: 60,     // 信息窗口高度
                          title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企業(yè)名稱</span>' , // 信息窗口標(biāo)題
                        }
                        var infoWindow = new BMap.InfoWindow('<div style="line-height:2em;font-size:16px;">'+e.name+'</div>', opts);  // 創(chuàng)建信息窗口對(duì)象
                        marker.addEventListener("mouseover", function(){
                          map.openInfoWindow(infoWindow,pt); //開(kāi)啟信息窗口
                        });
                        marker.addEventListener("mouseout", function() {
                          map.closeInfoWindow(infoWindow, pt); //開(kāi)啟信息窗口
                        });
                      })
                      that.inSum[0] = inNum1
                    }else{
                      that.inSum[0] = 0
                    }
                    if(response.data[1].length !== 0){
                      let inNum2=0;
                      response.data[1].forEach(e =>{
                        inNum2 +=e.demandCapacity
                        //map打點(diǎn)
                        let myIcon  = new BMap.Icon(
                          require("../../assets/image/pointBlue.png"),
                          new BMap.Size(20, 20)
                        );
                        myIcon.setImageSize(new BMap.Size(20,20));//設(shè)置圖標(biāo)大小
                        var pt = new BMap.Point(e.lat, e.lon);
                        var marker = new BMap.Marker(pt, { icon: myIcon });  // 創(chuàng)建標(biāo)注
                        map.addOverlay(marker);              // 將標(biāo)注添加到地圖中
                        //設(shè)置彈出框
                        var opts = {
                          position : pt,
                          width : 280,     // 信息窗口寬度
                          height: 60,     // 信息窗口高度
                          title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企業(yè)名稱</span>' , // 信息窗口標(biāo)題
                        }
                        var infoWindow = new BMap.InfoWindow('<div style="line-height:1.8em;font-size:16px;">'+e.name+'</div>', opts);  // 創(chuàng)建信息窗口對(duì)象
                        marker.addEventListener("mouseover", function(){
                          map.openInfoWindow(infoWindow,point); //開(kāi)啟信息窗口
                        });
                        marker.addEventListener("mouseout", function() {
                          map.closeInfoWindow(infoWindow, point); //開(kāi)啟信息窗口
                        });
                      })
                      that.inSum[1] = inNum2
                    }else{
                      that.inSum[1] = 0
                    }
                    if(response.data[2].length !== 0){
                      let inNum3=0;
                      response.data[2].forEach(e =>{
                        inNum3 +=e.demandCapacity
                        //map打點(diǎn)
                        let myIcon  = new BMap.Icon(
                          require("../../assets/image/pointBlue.png"),
                          new BMap.Size(20, 20)
                        );
                        myIcon.setImageSize(new BMap.Size(20,20));//設(shè)置圖標(biāo)大小
                        var pt = new BMap.Point(e.lat, e.lon);
                        var marker = new BMap.Marker(pt, { icon: myIcon });  // 創(chuàng)建標(biāo)注
                        map.addOverlay(marker);              // 將標(biāo)注添加到地圖中
                        //設(shè)置彈出框
                        var opts = {
                          position : pt,
                          width : 280,     // 信息窗口寬度
                          height: 60,     // 信息窗口高度
                          title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企業(yè)名稱</span>' , // 信息窗口標(biāo)題
                        }
                        var infoWindow = new BMap.InfoWindow('<div style="line-height:1.8em;font-size:16px;">'+e.name+'</div>', opts);  // 創(chuàng)建信息窗口對(duì)象
                        var infoWindow = new BMap.InfoWindow(e.name, opts);  // 創(chuàng)建信息窗口對(duì)象
                        marker.addEventListener("mouseover", function(){
                          map.openInfoWindow(infoWindow,point); //開(kāi)啟信息窗口
                        });
                        marker.addEventListener("mouseout", function() {
                          map.closeInfoWindow(infoWindow, point); //開(kāi)啟信息窗口
                        });
                      })
                      that.inSum[2] = inNum3
                    }else{
                      that.inSum[2] = 0
                    }
                    if(response.data[3].length !== 0){
                      let inNum4=0;
                      response.data[3].forEach(e =>{
                        inNum4 +=e.demandCapacity
                        //map打點(diǎn)
                        let myIcon  = new BMap.Icon(
                          require("../../assets/image/pointBlue.png"),
                          new BMap.Size(20, 20)
                        );
                        myIcon.setImageSize(new BMap.Size(20,20));//設(shè)置圖標(biāo)大小
                        var pt = new BMap.Point(e.lat, e.lon);
                        var marker = new BMap.Marker(pt, { icon: myIcon });  // 創(chuàng)建標(biāo)注
                        map.addOverlay(marker);              // 將標(biāo)注添加到地圖中
                        //設(shè)置彈出框
                        var opts = {
                          position : pt,
                          width : 280,     // 信息窗口寬度
                          height: 60,     // 信息窗口高度
                          title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企業(yè)名稱</span>' , // 信息窗口標(biāo)題
                        }
                        var infoWindow = new BMap.InfoWindow('<div style="line-height:1.8em;font-size:16px;">'+e.name+'</div>', opts);  // 創(chuàng)建信息窗口對(duì)象
                        marker.addEventListener("mouseover", function(){
                          map.openInfoWindow(infoWindow,point); //開(kāi)啟信息窗口
                        });
                        marker.addEventListener("mouseout", function() {
                          map.closeInfoWindow(infoWindow, point); //開(kāi)啟信息窗口
                        });
                      })
                      that.inSum[3] = inNum4
                    }else{
                      that.inSum[3] = 0
                    }
                  })
                });
              // }
            });
          }
        }, 1000);
      }
    }
 },



response.data[0].forEach(e =>{
   //map打點(diǎn)
  let myIcon  = new BMap.Icon(//打點(diǎn)圖標(biāo)
    require("../../assets/image/pointBlue.png"),
    new BMap.Size(100, 100)
  );
   myIcon.setImageSize(new BMap.Size(20,20));//設(shè)置圖標(biāo)大小
   var pt = new BMap.Point(e.lat, e.lon);
   var marker = new BMap.Marker(pt, { icon: myIcon });  // 創(chuàng)建標(biāo)注
   map.addOverlay(marker);              // 將標(biāo)注添加到地圖中
  //設(shè)置彈出框
   var opts = {
     width : 280,     // 信息窗口寬度
       height: 60,     // 信息窗口高度
      title : '<span style="font-size:18px;color:#00aeee;font-weight: 600">企業(yè)名稱</span>' , // 信息窗口標(biāo)題
   }
   var infoWindow = new BMap.InfoWindow('<div style="line-height:2em;font-size:16px;">'+e.name+'</div>', opts);  // 創(chuàng)建信息窗口對(duì)象
                        marker.addEventListener("mouseover", function(){
                          map.openInfoWindow(infoWindow,pt); //開(kāi)啟信息窗口
                        });
                        marker.addEventListener("mouseout", function() {
                          map.closeInfoWindow(infoWindow, pt); //開(kāi)啟信息窗口
                        });
                      })

實(shí)現(xiàn)效果：


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容