在vue項(xiàng)目中添加高德地圖,對(duì)開(kāi)發(fā)地圖的開(kāi)發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用高德地圖的超詳細(xì)步驟,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、賬號(hào)準(zhǔn)備

首先，需要注冊(cè)并登錄高德地圖開(kāi)放平臺(tái)，申請(qǐng)密鑰。

操作指引：高德地圖開(kāi)放平臺(tái)

二、安裝高德地圖加載器

npm 安裝：

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

或者 yarn 安裝：

yarn add @amap/amap-jsapi-loader --save

安裝成功：

三、封裝地圖組件

1）引入 AMapLoader

import AMapLoader from '@amap/amap-jsapi-loader';

2）引入安全密鑰

根據(jù)官方文檔，申請(qǐng)的 key 需要引入安全密鑰一起使用：

<script>
window._AMapSecurityConfig = {
  securityJsCode: '' // '「申請(qǐng)的安全密鑰」',
}
</script>

3）初始化地圖

methods: {
    initAMap () {
      AMapLoader.load({
        key: "", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
        version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
          'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 獲取到作為地圖容器的DOM元素，創(chuàng)建地圖實(shí)例
        this.map = new AMap.Map("amapcontainer", { //設(shè)置地圖容器id
          resizeEnable: true,
          zoom: this.zoom, // 地圖顯示的縮放級(jí)別
          viewMode: "3D", // 使用3D視圖
          zoomEnable: true, // 地圖是否可縮放，默認(rèn)值為true
          dragEnable: true, // 地圖是否可通過(guò)鼠標(biāo)拖拽平移，默認(rèn)為true
          doubleClickZoom: true, // 地圖是否可通過(guò)雙擊鼠標(biāo)放大地圖，默認(rèn)為true
          zoom: 11, //初始化地圖級(jí)別
          center: [113.370824, 23.131265], // 初始化中心點(diǎn)坐標(biāo) 廣州
          // mapStyle: "amap://styles/darkblue", // 設(shè)置顏色底層
        })
      }).catch(e => {
          console.log(e)
        })
    }
}

4）DOM初始化完成進(jìn)行地圖初始化

在 mouted 生命周期中調(diào)用初始化地圖方法對(duì)頁(yè)面進(jìn)行渲染：

 mounted() {
    // DOM初始化完成進(jìn)行地圖初始化
    this.initAMap()
}

5）完整代碼

文件 amap.vue：

<template>
  <div id="amapcontainer" style="width: 800px; height: 620px"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: '' // '「申請(qǐng)的安全密鑰」',
}
export default {
  data () {
    return {
      map: null
    }
  },
  methods: {
    initAMap () {
      AMapLoader.load({
        key: "", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
        version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
          'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 獲取到作為地圖容器的DOM元素，創(chuàng)建地圖實(shí)例
        this.map = new AMap.Map("amapcontainer", { //設(shè)置地圖容器id
          resizeEnable: true,
          zoom: this.zoom, // 地圖顯示的縮放級(jí)別
          viewMode: "3D", // 使用3D視圖
          zoomEnable: true, // 地圖是否可縮放，默認(rèn)值為true
          dragEnable: true, // 地圖是否可通過(guò)鼠標(biāo)拖拽平移，默認(rèn)為true
          doubleClickZoom: true, // 地圖是否可通過(guò)雙擊鼠標(biāo)放大地圖，默認(rèn)為true
          zoom: 11, //初始化地圖級(jí)別
          center: [113.370824, 23.131265], // 初始化中心點(diǎn)坐標(biāo) 廣州
          // mapStyle: "amap://styles/darkblue", // 設(shè)置顏色底層
        })
      }).catch(e => {
          console.log(e)
        })
    }
  },
  mounted () {
    //DOM初始化完成進(jìn)行地圖初始化
    this.initAMap()
  }
}
</script>

<style lang="less">
</style>

四、頁(yè)面使用

在需要使用的組件中引入amap.vue：

<template>
  <div>
    <map-container></map-container>
  </div>
</template>
<script>
import MapContainer from "@/components/amap";
export default {
  name: "purchannel",
  components: { MapContainer },
  data () {
    return {
    }
  },
  watch: {},
  created () { },
  mounted () { },
  methods: {
  }
}
</script>

<style lang="less" scoped>
</style>

頁(yè)面效果：