事先準備

注冊賬號并申請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({// 高德的keykey: 'your key',// 插件集合plugin: ['AMap.Geolocation', 'AMap.Marker', 'AMap.ToolBar', 'AMap.Circle', 'AMap.PolyLine'],uiVersion: '1.0',// 高德 sdk 版本，默認為 1.4.4v: '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

?

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

?

?

嗯，就醬~~

?

轉載于:https://www.cnblogs.com/jin-zhe/p/9925094.html

總結

以上是生活随笔為你收集整理的Nuxt使用高德地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。