vue整合百度地圖顯示指定地點信息

更新時間：2022年04月06日 09:55:06 作者：智慧包

本文主要介紹了vue整合百度地圖顯示指定地點信息，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、安裝相關依賴

npm i --save vue-baidu-map

二、在main.js中引用

import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap,{
? ak: '你的密鑰(百度地圖開放API官網(wǎng)可免費申請)'
})

三、創(chuàng)建地圖工具 map.js

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

在需要用到地圖的文件引入該工具

import { MP } from "@/utils/map.js";

四、繪制地圖

1、創(chuàng)建一個容器展示地圖，給容器指定一個id，根據(jù)頁面的具體需求指定容器的寬和高

<div class="map">
    <div id="container" style="height: 300px; width: 100%" ref="allmap"></div>
</div>

2、在data中定義需要用到的數(shù)據(jù)

 data() {
    return {
        dialogMap: false,
    mapPointName: "",
    mapGetshow: true
    }
}

3、定義全局的map地圖對象和geocoder地理編碼對象

var map;
let geoc = null;

4、創(chuàng)建一個定位地點的方法，添加要展示的地點的名稱，此處也可動態(tài)指定

mapNameChange() {
      let that = this,
        point,
        marker = null;
      let local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
        onSearchComplete: (res) => {
          if (local.getResults() != undefined) {
            map.clearOverlays(); //清除地圖上所有覆蓋物
            if (local.getResults().getPoi(0)) {
              point = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
              map.centerAndZoom(point, 10);
              marker = new BMap.Marker(point); // 創(chuàng)建標注
              map.addOverlay(marker); // 將標注添加到地圖中
              marker.enableDragging(); // 可拖拽
              geoc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                that.mapPointName =
                  addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street +
                  ", " +
                  addComp.streetNumber;
              });
            } else {
              console.log("未搜索到結果")
            }
          } else {
            alert("未搜索到結果");
          }
        },
      });
      local.search("岳陽樓"); //要展示的地點
    },

5、在mounted函數(shù)中調用上述方法并繪制地圖

mounted() {
    this.$nextTick(function () {
      var _this = this;
      MP(_this.ak).then((BMap) => {
        let that = this;
        this.dialogMap = !this.dialogMap;
        if (that.mapGetshow) {
          map = new BMap.Map("container");    //存放地圖容器的id
          geoc = new BMap.Geocoder();
          map.enableScrollWheelZoom();
        }
        _this.mapNameChange()    //調用定位地點的方法
      });
    });
  }

到此這篇關于vue整合百度地圖顯示指定地點信息的文章就介紹到這了,更多相關vue 百度地圖顯示地點內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: