VUE百度地圖API調用（手機端、PC端、微信通用）

百度地圖API-示例中心：

https://lbsyun.baidu.com/jsdemo.htm#aCreateMap

1.引入百度地圖（此處用到的是V2.0版本）

  1> 建立一個js文件，例 map.js

export function loadBMap(funcName) {
    var script = document.createElement("script");
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=你申請的AK&callback=" + funcName;
    document.body.appendChild(script);
}

  2> 在需要使用百度地圖的頁面調用 map.js

import {loadBMap} from '@/utils/map'

2.引入完成后，進行百度地圖初始化

  1> 創建一個地圖“容器”

<div id="map-container"></div>

  2> 初始化一個簡單的百度地圖

const that = this
let lng = 116.404
let lat = 39.928
/* 百度地圖 */
window.initBaiduMapScript = () =>{
  that.map = new BMap.Map('map-container');
  that.map.centerAndZoom(new BMap.Point(lng, lat), 15);

  //開啟鼠標滾輪縮放
  that.map.enableScrollWheelZoom(true);

  // 添加比例尺控件
  var scaleCtrl = new BMap.ScaleControl();
  that.map.addControl(scaleCtrl);

  // 添加比例尺控件
  var zoomCtrl = new BMap.NavigationControl();
  that.map.addControl(zoomCtrl);　　

　// 監聽地圖加載完成后-關閉加載層
  that.map.addEventListener('tilesloaded', function () {
     
  });

} 

loadBMap('initBaiduMapScript');

效果圖

至此，一個簡單的地圖就加載完成了。

接下來進行一些擴展

1. 百度地圖輸入地址搜索並定位到當前搜索位置

<input id="suggestId" type="text" v-model="searchVal" placeholder="請輸入地址">
<button @click="search()">搜索</button>

// 建立一個自動完成的對象
var ac = new BMap.Autocomplete({
  "input" : "suggestId",
  "location" : that.map
});
// 搜索-點擊下拉列表后的事件
ac.addEventListener("onconfirm", function(e) {
  var _value = e.item.value;
  that.searchVal = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  // 搜索
  that.search();
});

// 搜索-地圖
search(){
  const that = this
  //智能搜索
  var local = new BMap.LocalSearch(that.map, {
    onSearchComplete: ()=>{
      //獲取第一個智能搜索的結果
      const pp = local.getResults().getPoi(0).point;
      that.map.centerAndZoom(pp, 18);
    }
  });
  local.search(that.searchVal);
},

 效果圖

2. 在地圖上添加、刪除Marker標記(覆蓋物)

// 添加地圖標記
addMarkFn(lng, lat){
  const that = this
  const localInfo = {
    lng,
    lat
  }
  // 創建標記圖標
  // const myIcon = new BMap.Icon(this.markerImg, new BMap.Size(19, 24));
  // 創建點標記
  const point = new BMap.Point(lng, lat);
  // 創建Marker標注
  const marker = new BMap.Marker(point, {
    // enableDragging: true,
    // icon: myIcon
  });

  // 用所定位的經緯度查找所在地省市街道等信息
  const getLocationInfo = () => new Promise((resolve, reject)=>{ // 設置aa函數返回promise對象
    var gc = new BMap.Geocoder();
    gc.getLocation(point, function (rs) {
      if (rs.surroundingPois.length > 0) {
        localInfo.address =  rs.address+rs.surroundingPois[0].title;
      } else {
        localInfo.address = rs.address;
      }
      console.log(localInfo);//地址信息
      resolve(localInfo)
    });
  })
  getLocationInfo().then(res=>{
    var opts = {
      width : 100,     // 信息窗口寬度
      height: 100,     // 信息窗口高度
      title : '信息窗口標題-故宮博物館' // 信息窗口標題
    }
    const tipHtml =
      "<p class='m0 font-12'>地址："+localInfo.address+"</p>"+
      "<a href='http://api.map.baidu.com/marker?location="+lat+","+lng+"&title="+localInfo.address+"&content=內容介紹&mode=driving&output=html'>導航去這里</a>"+
      "<p class='m0 mt3 font-12'>" +
      "<span class='marker-del' onclick=delMarkFn('"+lng+"','"+lat+"')>刪除</span>" +
      "</p>"
    // 創建信息窗口對象
    var infoWindow = new BMap.InfoWindow(tipHtml, opts);
    marker.addEventListener("click", function(){
      //開啟信息窗口
      this.map.openInfoWindow(infoWindow, point);
      // 阻止冒泡
      window.event? window.event.cancelBubble = true : e.stopPropagation();
    });
  })
  // 在地圖上添加點標記
  this.map.addOverlay(marker);
  // 設置標注
  var label = new BMap.Label("<span>故宮博物館</span>",{offset:new BMap.Size(20,-10)});
  marker.setLabel(label);
},

// 刪除地圖標記
delMarkFn(lng, lat){
  var point = new BMap.Point(lng, lat);
  var allOverlay = this.map.getOverlays();
  for(var j = 0;j<allOverlay.length;j++) {
    //刪除指定經度的點
    if (allOverlay[j].toString()=="[object Marker]" && allOverlay[j].getPosition().lng == lng && allOverlay[j].getPosition().lat == lat ) {
      this.map.removeOverlay(allOverlay[j]);
    }
  }
  this.map.closeInfoWindow(point)
},

備注（常用）：

 

// 清除地圖上所有覆蓋物
that.map.clearOverlays();

 

// 在地圖上繪制圓范圍
var circle = new BMap.Circle(point, 20, {
  strokeColor: 'red',
  strokeWeight: 1,
  strokeOpacity: 0.2
});
this.map.addOverlay(circle);

效果圖

3.監聽百度地圖點擊事件

// 點擊地圖添加標記
that.map.addEventListener('click', function (e) {
  console.log('點擊了地圖，點擊位置經緯度為：' + e.point.lng + ',' + e.point.lat);
  // 點擊后需要觸發的事件，例-點擊添加marker
　that.addMarkFn(e.point.lng, e.point.lat)
});

效果圖

4. 使用微信瀏覽器打開帶有百度地圖的頁面

用微信瀏覽器打開含有百度地圖的頁面時，無法通過 new BMap.Geolocation() 定位到當前位置，這時需要調用微信SDK才可獲取當前位置坐標

 a> 安裝微信sdk

npm i weixin-js-sdk --save-dev

 b> 初始化微信sdk，創建一個wx.js

  wx.js

//微信sdk依賴
import wx from 'weixin-js-sdk'
//要用到微信API
import {getWXSignature} from '@/api/api'

function getJSSDK(url, dataForWeixin) {
  return new Promise((resolve, reject) => {
    getWXSignature({url: url}).then(res => {
      wx.config({
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        //下面這里不用管  讓后台看一下  讓他返給你
        appId: res.data.appId, // 必填，公眾號的唯一標識
        timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
        nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
        signature: res.data.signature, // 必填，簽名
        jsApiList: [
          'updateAppMessageShareData',
          'updateTimelineShareData',
          "getLocation",
        ] // 必填，需要使用的JS接口列表
      })

      wx.error((err)=>{
        console.log(err,555666)
      })
      resolve()
    }).catch(()=>{
      reject()
    })
  })
}

export default {
  // 獲取JSSDK
  getJSSDK: getJSSDK
}

  引入wx.js並初始化

// 引入
import sdk from '@/utils/wx'

// 初始化sdk完成后再加載地圖，避免獲取定位失敗
sdk.getJSSDK(window.location.href.split('#')[0],{}).then(()=>{
  // 初始化地圖
  this.initBMap()
})

 c> 調用微信sdk獲取當前位置坐標

let that = this
wx.getLocation({
  type: 'gcj02',
  complete: function (res) {
    // res.longitude - 當前經度
    // res.latitude - 當前維度
  }
});

因微信獲取的地圖經緯度是騰訊地圖的經緯度，直接放進百度地圖使用定位會有較大偏差，故，當獲取當微信當前的經緯度后需要轉換一下再使用

 a > 安裝gcoord

cnpm i gcoord --save-dev

 b > 引入

import gcoord from 'gcoord'

 c > 轉換獲得百度坐標

// 坐標轉換
var result = gcoord.transform([res.longitude,res.latitude], gcoord.GCJ02, gcoord.BD09);
// 得到轉換后的經緯度
that.wxLocalLng = result[0]
that.wxLocalLat = result[1]

 最后附上完整代碼

<template>
  <div>
    <div>
      <input type="text" id="suggestId" v-model="searchVal" style="width: 325px"/>
      <button>搜索</button>
    </div>
    <div id="map-container"></div>
  </div>
</template>

<script>
import {loadBMap} from "../utils/map";
import wx from 'weixin-js-sdk'
import gcoord from 'gcoord'
// wx初始化
import sdk from '@/utils/wx'

export default {
  name: 'HelloWorld',
  data () {
    return {
      map: null,
      // 搜索
      searchVal: '',
      // 當前位置坐標
      localLng: '',
      localLat: '',
      // 微信當前位置坐標
      wxLocalLng: '',
      wxLocalLat: '',
    }
  },
  mounted(){
    // 刪除標記事件
    window.delMarkFn=this.delMarkFn;
    // sdk
    sdk.getJSSDK(window.location.href.split('#')[0],{}).then(()=>{
      // 初始化地圖
      this.initBMap()
    })
  },
  methods:{
    // 初始化地圖
    initBMap () {
      const that = this
      /* 百度地圖 */
      window.initBaiduMapScript = () =>{
        that.map = new BMap.Map('map-container');
        that.map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
        //開啟鼠標滾輪縮放
        that.map.enableScrollWheelZoom(true);
        // 添加比例尺控件
        var scaleCtrl = new BMap.ScaleControl();
        that.map.addControl(scaleCtrl);
        // 添加比例尺控件
        var zoomCtrl = new BMap.NavigationControl();
        that.map.addControl(zoomCtrl);

        // 獲取當前位置（導航用）
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (data) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            // 當前坐標經緯度
            that.localLng = data.point.lng
            that.localLat = data.point.lat
            // 如果為微信內置瀏覽器，則當前位置需要微信授權定位
            if (that.wxLocalLng || that.wxLocalLat) {
              // 當前坐標經緯度
              that.localLng = that.wxLocalLng
              that.localLat = that.wxLocalLat
            }
          } else {
            console.log('無法定位到您的當前位置，導航失敗，請手動輸入您的當前位置！' + that.getStatus());
          }
        }, {
          enableHighAccuracy: true
        });

        // 回顯標記
        that.addMarkFn(116.404, 39.928)
        // 點擊地圖添加標記
        that.map.addEventListener('click', function (e) {
          alert('點擊了地圖，點擊經緯度為：' + e.point.lng + ',' + e.point.lat);
          that.addMarkFn(e.point.lng, e.point.lat)
        });
        // 搜索-建立一個自動完成的對象
        var ac = new BMap.Autocomplete({
          "input" : "suggestId",
          "location" : that.map
        });
        // 搜索-點擊下拉列表后的事件
        ac.addEventListener("onconfirm", function(e) {
          var _value = e.item.value;
          that.searchVal = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
          // 搜索
          that.search();
        });
        // 監聽地圖加載完成后-關閉加載層
        that.map.addEventListener('tilesloaded', function () {

        });
      }
      // 加載地圖
      loadBMap('initBaiduMapScript');
      // 獲取微信位置
      that.getWxLocalPosition()
    },
    // 微信需授權后才可獲取地理位置
    getWxLocalPosition(){
      let that = this
      wx.getLocation({
        type: 'gcj02',
        complete: function (res) {
          if(res.latitude){
            // 坐標轉換
            var result = gcoord.transform([res.longitude,res.latitude], gcoord.GCJ02, gcoord.BD09);
            that.wxLocalLng = result[0]
            that.wxLocalLat = result[1]
          }
        }
      });
    },
    // 搜索-地圖
    search(){
      const that = this
      //智能搜索
      var local = new BMap.LocalSearch(that.map, {
        onSearchComplete: ()=>{
          //獲取第一個智能搜索的結果
          const pp = local.getResults().getPoi(0).point;
          that.map.centerAndZoom(pp, 18);
        }
      });
      local.search(that.searchVal);
    },
    // 添加地圖標記
    addMarkFn(lng, lat){
      const that = this
      const localInfo = {
        lng,
        lat
      }
      // 創建標記圖標
      // const myIcon = new BMap.Icon(this.markerImg, new BMap.Size(19, 24));
      // 創建點標記
      const point = new BMap.Point(lng, lat);
      // 創建Marker標注
      const marker = new BMap.Marker(point, {
        // enableDragging: true,
        // icon: myIcon
      });

      // 用所定位的經緯度查找所在地省市街道等信息
      const getLocationInfo = () => new Promise((resolve, reject)=>{ // 設置aa函數返回promise對象
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
          if (rs.surroundingPois.length > 0) {
            localInfo.address =  rs.address+rs.surroundingPois[0].title;
          } else {
            localInfo.address = rs.address;
          }
          console.log(localInfo);//地址信息
          resolve(localInfo)
        });
      })
      getLocationInfo().then(res=>{
        var opts = {
          width : 100,     // 信息窗口寬度
          height: 100,     // 信息窗口高度
          title : '信息窗口標題-故宮博物館' // 信息窗口標題
        }
        const tipHtml =
          "<p class='m0 font-12'>地址："+localInfo.address+"</p>"+
          "<a href='http://api.map.baidu.com/marker?location="+lat+","+lng+"&title="+localInfo.address+"&content=內容介紹&mode=driving&output=html'>導航去這里</a>"+
          "<p class='m0 mt3 font-12'>" +
          "<span class='marker-del' onclick=delMarkFn('"+lng+"','"+lat+"')>刪除</span>" +
          "</p>"
        // 創建信息窗口對象
        var infoWindow = new BMap.InfoWindow(tipHtml, opts);
        marker.addEventListener("click", function(){
          //開啟信息窗口
          this.map.openInfoWindow(infoWindow, point);
          // 阻止冒泡
          window.event? window.event.cancelBubble = true : e.stopPropagation();
        });
      })
      // 在地圖上添加點標記
      this.map.addOverlay(marker);
      // 設置標注
      var label = new BMap.Label("<span>故宮博物館</span>",{offset:new BMap.Size(20,-10)});
      marker.setLabel(label);
    },

    // 刪除地圖標記
    delMarkFn(lng, lat){
      var point = new BMap.Point(lng, lat);
      var allOverlay = this.map.getOverlays();
      for(var j = 0;j<allOverlay.length;j++) {
        //刪除指定經度的點
        if (allOverlay[j].toString()=="[object Marker]" && allOverlay[j].getPosition().lng == lng && allOverlay[j].getPosition().lat == lat ) {
          this.map.removeOverlay(allOverlay[j]);
        }
      }
      this.map.closeInfoWindow(point)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
#map-container{
  height: 100vh;
}
/deep/.marker-del{
  float: right;
  color: #f00;
}
/deep/.BMap_bubble_title{
  font-size: 14px;
  font-weight: bold;
  white-space: normal!important;
  line-height: 15px!important;
  margin-bottom: 3px;
}
/deep/.BMap_bubble_content{
  font-size: 12px;
}
</style>

有疑問或建議可留言交流，感謝支持！