Nuxt使用高德地圖

事先准備

注冊賬號並申請Key

1. 首先，注冊開發者賬號，成為高德開放平台開發者

2. 登陸之后，在進入「應用管理」 頁面「創建新應用」

3. 為應用添加 Key，「服務平台」一項請選擇「 Web 端 ( JSAPI ) 」

 

 

 

一、安裝

1.npm安裝（推薦）

通過 npm install  --save vue-amap 來安裝

2.CDN

目前可通過 unpkg.com/vue-amap 獲取最新版本的資源。

 通過script引入 <script src="https://unpkg.com/vue-amap/dist/index.js"></script>

 

二、使用

1.在插件目錄plugins下，新建一個vue-map.js文件

import Vue from 'vue'; import VueAMap from 'vue-amap'; Vue.use(VueAMap); // 初始化vue-amap
if (!Vue.prototype.$isServer) { VueAMap.initAMapApiLoader({ // 高德的key
    key: 'your key', // 插件集合
    plugin: ['AMap.Geolocation', 'AMap.Marker', 'AMap.ToolBar', 'AMap.Circle', 'AMap.PolyLine'], uiVersion: '1.0', // 高德 sdk 版本，默認為 1.4.4
    v: '1.4.8' }); }

 

這里的key為事先准備時候注冊的key值，填到這里就可以了，如下圖所示

 

2.在配置文件nuxt.cofig.js中的plugins里添加剛才寫的vue-map.js文件，如下圖所示

 

 

 

 3.然后在頁面就可以使用el-map來使用地圖了，地圖的屬性通過頁面的值來賦予

<template>
  <section style="width: 1000px; height: 800px;">
    <no-ssr>
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :events="events">
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :key="index" :vid="index" :events="marker.events"></el-amap-marker>
        <el-amap-circle :center="circle.center" :radius="circle.radius" :fill-opacity="0.5" fill-color="#ffb5b3" stroke-color="#ffb5b3"></el-amap-circle>
        <el-amap-polyline :path="polyline.path"></el-amap-polyline>
      </el-amap>
    </no-ssr>
  </section>
</template>

<script> import * as _ from 'lodash'; export default { data() { let self = this; return { center: [121.59996, 31.197646], events: { init(map) { let markers = _.cloneDeep(self.markers); markers.forEach((item, index) => { AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) { item = new SimpleMarker({ iconLabel: { innerHTML: index, style: { color: '#fff' } }, iconStyle: '#1995f5', map: map, position: item.position }); }); }); } }, lng: 0, lat: 0, plugin: [{ pName: 'Geolocation', events: { click: (o) => { o.getCurrentPosition((status, result) => { if (result && result.position) { self.lng = result.position.lng; self.lat = result.position.lat; self.center = [self.lng, self.lat]; self.$nextTick(); } }); } }, buttonPosition: 'LT' }], markers: [ { position: [121.59996, 31.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true }, { position: [122.59996, 32.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true } ], circle: { center: [121.59996, 31.197646], radius: 6000 }, polyline: { path: [[121.59996, 31.1976461], [121.5389385, 31.197646]] } }; }, methods: { }, mounted() { }, beforeDestroy() { } }; </script>

 

　　然后 npm run dev 運行程序即可看到效果

 

 

 

 

注意事項：

　　1.兩個參考文檔

　　  https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install  （amap）

　　  https://lbs.amap.com/api/javascript-api/guide/abc/prepare（高德） 

 

　　2.vue-amap 能夠拋開高德原生 SDK 覆蓋大多數場景，但對於部分定制化程度較高的場景而言，可能還是需要引入高德原生 SDK 來支持。

　　對於大多數 vue-amap 組件，都有 init 這個 event，參數為高德的實例，通過這樣暴露高德實例的方式，開發者能夠非常自由地將原生 SDK 和 vue-amap 結合起來使用。

　　若涉及到高德原生 AMap 需要注意的點：

• 確保 vue-amap 的導入名不是 AMap，推薦 import VueAMap from 'vue-amap' 避免和高德全局的 AMap 沖突。
• 若 eslint 報錯 AMap is undefined 之類的錯誤。請將 AMap 配置到 .eslintrc 的 globals 中。

 

<template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo" :center="center" :amap-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="add()">add marker</button>
      </div>
    </div>
  </template>

  <style> .amap-demo { height: 300px;
    }
  </style>

  <script>
    // NPM 方式
    // import { AMapManager } from 'vue-amap';
    // CDN 方式
 let amapManager = new VueAMap.AMapManager(); module.exports = { data: function() { return { zoom: 12, center: [121.59996, 31.197646], amapManager, events: { init(o) { let marker = new AMap.Marker({ position: [121.59996, 31.197646] }); marker.setMap(o); } } }; }, methods: { add() { let o = amapManager.getMap(); let marker = new AMap.Marker({ position: [121.59996, 31.177646] }); marker.setMap(o); } } }; </script>

 

 

 3.如果文檔的插件不能滿足自己的需求，可以自己自定義添加一些功能，比如切換地圖上標注的大小，全屏顯示之類的功能，按鈕自己添加，然后定位到地圖上的相應位置即可

<template>
  <section style="width: 1000px; height: 800px;">
    <no-ssr>
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :events="events">
        <div class="map-range map-icon bg-white map-border text-center cursor-pointer">
          <i class="el-icon-rank text-22 icon-state"></i>
        </div>
        <div class="map-enlarge map-icon map-border bg-white text-center cursor-pointer">
          <p class="icon-state"><i class="iconfont icon-fangda text-22"></i></p>
        </div>
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :key="index" :vid="index" :events="marker.events"></el-amap-marker>
        <el-amap-circle :center="circle.center" :radius="circle.radius" :fill-opacity="0.5" fill-color="#ffb5b3" stroke-color="#ffb5b3"></el-amap-circle>
        <el-amap-polyline :path="polyline.path"></el-amap-polyline>
      </el-amap>
    </no-ssr>
  </section>
</template>

<script> import * as _ from 'lodash'; export default { data() { let self = this; return { center: [121.59996, 31.197646], events: { init(map) { let markers = _.cloneDeep(self.markers); markers.forEach((item, index) => { AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) { item = new SimpleMarker({ iconLabel: { innerHTML: index, style: { color: '#fff' } }, iconStyle: '#1995f5', map: map, position: item.position }); }); }); } }, lng: 0, lat: 0, plugin: [{ pName: 'Geolocation', events: { click: (o) => { o.getCurrentPosition((status, result) => { if (result && result.position) { self.lng = result.position.lng; self.lat = result.position.lat; self.center = [self.lng, self.lat]; self.$nextTick(); } }); } }, buttonPosition: 'LT' }], markers: [ { position: [121.59996, 31.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true }, { position: [122.59996, 32.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true } ], circle: { center: [121.59996, 31.197646], radius: 6000 }, polyline: { path: [[121.59996, 31.1976461], [121.5389385, 31.197646]] } }; }, methods: { }, mounted() { }, beforeDestroy() { } }; </script>

<style lang="scss"> .map-icon { height: 35px; width: 35px; position: absolute; top: 20px; border-radius: 5px; overflow: hidden; line-height: 20px; z-index: 99; .icon-state { margin-top: 8px;
  } } .map-enlarge { left: 105px;
  } .map-border { border: 1px solid #b5b9b7;
  } .map-range { left: 55px;
  }
</style>

 

 

 4.動態修改數據以后，地圖不會立刻根據數據進行重新渲染，這時候我們需要加一個判斷，更新數據前把地圖隱藏起來，更新以后通過this.$nextTick(() => {xxx})再顯示地圖，這樣可以解決這個問題

 

5.如果把地圖這部分寫成一個組件，不同頁面根據傳入的不同數據來渲染不同的地圖的話，進入頁面的時候也會出現上面的數據更新導致錯誤地圖的問題，此時可以先不顯示地圖，然后設置一個定時器，500毫秒后在渲染地圖，這樣可以避免這個問題，如果使用了定時器，頁面銷毀前記得清除定時器哦~

 

6.關於坐標點標注，遮擋物樣式什么的，可以通過高德地圖的UI組件庫來進行自定義修改

　　https://lbs.amap.com/api/javascript-api/reference-amap-ui/other/positionpicker

 

如果大佬們有更好的方法和建議，可以在下面回復交流一下哦~

 

 

嗯，就醬~~