VUE項目中調(diào)用高德地圖的全流程講解

更新時間：2022年08月31日 10:53:53 投稿：jingxian

這篇文章主要介紹了VUE項目中調(diào)用高德地圖的全流程講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

相信大家或多或少都接觸過在大屏的項目，在大屏項目中除了用到了echarts中的行政地圖，街道地圖也是很常見的，今天主要來說一下在vue中調(diào)用高德地圖遇到的一些問題。

申請高德key

無論我們使用任何方式調(diào)用高德地圖都需要在高德地圖開放平臺中申請key

注冊帳號

訪問高德地圖開發(fā)平臺根據(jù)實際情況填寫就可以（實名認證的時候選擇個人就可以，如果是企業(yè)級的項目，可能會涉及人員變動，建議使用公司郵箱進行注冊）區(qū)別如下。

創(chuàng)建應(yīng)用

新建應(yīng)用時名稱，與類型可以隨意填寫，盡量填寫的與開發(fā)的應(yīng)用一直，方便后期維護

應(yīng)用創(chuàng)建成功之后，點擊添加就會需要我們選擇需要使用高德地圖的哪些服務(wù)，不同的服務(wù)平臺，對應(yīng)填寫的內(nèi)容也有所區(qū)別，例如Android需要填寫App包名，Android的SHA1碼等等，因為我這次的項目是個大屏項目所以就選擇Web端（JSAPI）

信息填寫完畢之后就會在當(dāng)前應(yīng)用下生成對應(yīng)的Key值和安全密鑰（安全密鑰在之前的版本中是沒有的）

技術(shù)選型

vue-amap

vue-amap是基于 Vue 2.x 與高德的地圖組件，提供一些基礎(chǔ)和高級的功能，例如：地圖扎點，信息窗體，搜索組件，類型插件等等，不需要我們在造輪子了，所以我們就來試一試。

準備工作

當(dāng)我們在使用組件的時候都會先看一下文檔，但是當(dāng)我在看文檔的時候發(fā)現(xiàn)，文檔中只有對應(yīng)的api而沒有示例，很難下手，于是在issues中找到了答案。

解決方案也很簡單

將項目下載到本地

修改src/docs/index.html里的docsify引用

將

<script src="http://unpkg.com/docsify/lib/docsify.min.js"></script>

修改為

<script src="http://unpkg.com/docsify@4.11.6/lib/docsify.min.js"></script>?

執(zhí)行npm install npm start默認在4201端口就會啟動項目就可以看到項目示例了。

項目中應(yīng)用

npm安裝

npm install vue-amap --save

main.js中掛載vue-amap

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  //申請地址 https://lbs.amap.com/ 選擇web端jsAPI
  key: '自己申請的高德地圖key', 
  // 插件集合，用到什么插件就使用什么插件
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.4', // 高德sdk版本，最新的sdk已經(jīng)出到了2.0
  //官網(wǎng)解釋：JSAPI 2.0 提供的開發(fā)接口與 1.4 版本達到 99%的兼容度，但是為了保證插件的穩(wěn)定性我們還是選擇1.4.4。
})

組件用法

<template>
      <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :events="events" class="amap-demo">
      </el-amap>
  </template>
  <script> // 建議將zoom,center等可配置的項均寫在配置文件中，方便打包之后進行修改。
    module.exports = {
      data: function() {
        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          events: {
            'click': (e) => {
              alert('map clicked');
            }
          },
        };
      },
    }; </script>

以上就是在vue項目中使用vue-amap調(diào)用高德地圖api的基本使用，具體對地圖的操作可以根據(jù)文檔的規(guī)范來就可以了，在使用的過程中可能會遇到幾個問題。

刷新頁面，地圖加載偶爾失敗

在main.js中加入以下內(nèi)容。

// 解決地圖刷新顯示不出來
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))
amapKeys.forEach(key => {
  // console.log(key)
  localStorage.removeItem(key)
})

在綁定插件的時候，控制臺報錯 a[d].split is not a function

含有地圖組件的路由不使用懶加載的方式（臨時方案）

注： vue-amap 是不支持vue3.x，并且不能綁定高德地圖新版api對應(yīng)的安全密鑰jscode,可能會導(dǎo)致部分服務(wù)無法使用。對應(yīng)的vue3版本的插件看這里。

原生調(diào)用高德API

安裝官方提供的loader

npm install @amap/amap-jsapi-loader --save

main.js中綁定安全密鑰jscode（不綁定部分功能無法使用）

// 該寫法只推薦在開發(fā)階段，如果在生產(chǎn)階段建議采用反向代理
// 官網(wǎng)說明https://lbs.amap.com/api/javascript-api/guide/abc/prepare
window._AMapSecurityConfig = {
  securityJsCode: 'jscode' // 輸入你的jscode
}

封裝組件

<template>
    <div class="home_div">
        <div id="container"></div>
    </div>
</template>
<script> import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    name: "Mapview",
    data() {
        return {
            map: null,
        }
    },
    created() {
    },
    mounted() {
        this.initAMap();
    },
    methods: {
        initAMap() {
            AMapLoader.load({
                key: 'xxx',  //設(shè)置您的key
                version: "2.0", // 高德地圖版本
                plugins: ['AMap.ToolBar', 'AMap.Driving'], // 插件
                AMapUI: { // 高德地圖UI組件庫，可不寫，內(nèi)部提供了覆蓋物標注點，以及部分模塊的封裝
                    version: "1.1",
                    plugins: [],
                },
                Loca: { // Loca版本(高性能地圖數(shù)據(jù)可視化庫) 可不寫
                    version: "2.0"
                },
            }).then((AMap) => {
                // container渲染的id
                this.map = new AMap.Map("container", {
                    zoom: 5, // 當(dāng)前縮放級別
                    zooms: [2, 22], // 縮放級別范圍
                    center: [105.602725, 37.076636], // 中心點
                });
            }).catch(e => {
                console.log(e);
            })
        },
    }
} </script>
<style  scoped> .home_div {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    position: relative;
}
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
} </style>

混合使用（vue-amap與原生API混合使用）

只想通過 vue-amap 引入高德地圖，而部分實例化的操作直接基于高德地圖的 sdk 完成

實例化操作不是加載地圖，簡單來說就是用一些屬性去實例化地圖的這個類 new xxx() 代表的就是實例化xxx。這樣就不需要在使用el-amap中的center屬性和zoom屬性了，因為已經(jīng)通過原生的方式進行實例化了。

import { lazyAMapApiLoaderInstance } from 'vue-amap';
lazyAMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
});

在vue-amap中引入高德原生SDK只需在el-amap上綁定amap-manager就可以拿到高德原生AMap.Map實例文檔地址

<template>
? <div class="amap-page-container">
? ? <el-amap vid="amapDemo" :center="center" :amap-manager="amapManager" :zoom="zoom"
? ? ? class="amap-demo">
? ? </el-amap>
? ? <div class="toolbar">
? ? ? <button @click="add()">add marker</button>
? ? </div>
? </div>
</template>
? <style> .amap-demo {
? height: 300px !important;
} </style>
? <script> // NPM 方式
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();
export default {
? data: function () {
? ? return {
? ? ? zoom: 12,
? ? ? center: [121.59996, 31.197646],
? ? ? amapManager,
? ? };
? },
? methods: {
? ? add() {
? ? ? let o = amapManager.getMap();
? ? ? let marker = new AMap.Marker({
? ? ? ? position: [121.59996, 31.177646]
? ? ? });
? ? ? marker.setMap(o);
? ? }
? }
}; </script>?