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

 

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

 

 

嗯,就醬~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM