Vue中如何使用高德地圖

效果圖：

 這是高德地圖API文檔位址： 地圖的建立-生命周期-示例中心-JS API 示例 | 高德地圖API

1.安裝

vue

-amap安裝

2.main.js中的配置

key申請位址教程：

準備-入門-教程-地圖 JS API | 高德地圖API

1.// 高德離線地圖
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
 
VueAMap.initAMapApiLoader({
  // 高德key
  key: 'd6eabbd08f89ccfb74278b36ab6342567', // 自己到官網申請，我随便寫的
  // 插件集合 （插件按需引入）
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],
  v: '1.4.15', // 我也不知道為什麼要寫這個，不寫項目會報錯，而且我随便寫的，跟我下載下傳的版本對應不了
  uiVersion: '1.0.11' // ui版本号，也是需要寫
})      

3.頁面中使用

1.<div id="mapChart" :style="{ width: '70vh', height: '70vh' }"></div>
// 地圖配置項
    initmapFn() {
      var _this = this;
      // 建立地圖，同時給地圖設定中心點、級别、顯示模式、自定義樣式等屬性
      _this.map1 = new AMap.Map("mapChart", {
        resizeEnable: true, //是否監控地圖容器尺寸變化
        zoom: 3, // 縮放級别
        center: [113.3245904, 23.1066805], //中心點坐标
      });
      //插件依舊寫在回調函數内,通過AMap.plugin方法按需引入插件，第一個參數是插件名,第二個是在plugin回調之後使用插件功能。
      AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], function () {
        _this.map1.addControl(new AMap.ToolBar());
        _this.map1.addControl(new AMap.Scale());
        _this.map1.addControl(new AMap.OverView({ isOpen: true }));
      });
      _this.map1.clearMap();// 清除所有的覆寫物資訊
      // 建立 infoWindow 執行個體
      // _this.map1.setFitView();
    },
    // 地圖示注
    onMarkerMap(data) {
      if (data[0]) {
        data.forEach((element, index) => {
          if (element.lng) {
            let marker = new AMap.Marker({
              //在回調函數裡面建立Marker執行個體,添加經緯度和标題
              position: new AMap.LngLat(element.lng, element.lat), //添加經緯度
              offset: new AMap.Pixel(-13, -30), // 偏移量
              // title: "廣州塔", // 滑鼠移上去時顯示的内容
              // 可以自定義标記點顯示的内容,允許插入html字元串
              // content: "<h1>廣州塔Content</h1>",
            });
            this.map1.add(marker); // 将建立的點标記添加到已有的地圖執行個體：
            //marker.setMap(this.map1);
            //名稱
            marker.setLabel({// 設定label标簽
              offset: new AMap.Pixel(-50, -30), //設定文本标注偏移量
              content: `<div class="info">${element.enterpriseName}</div>`, //設定文本标注内容
              direction: "right", //設定文本标注方位
            });
          }
        });
      }
}