vue項目中使用高德地圖的超詳細步驟

更新時間：2023年03月27日 11:24:08 作者：＊且聽風吟

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

一、賬號準備

首先，需要注冊并登錄高德地圖開放平臺，申請密鑰。

操作指引：高德地圖開放平臺

二、安裝高德地圖加載器

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）引入安全密鑰

根據官方文檔，申請的 key 需要引入安全密鑰一起使用：

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

3）初始化地圖

methods: {
    initAMap () {
      AMapLoader.load({
        key: "", // 申請好的Web端開發(fā)者Key，首次調用 load 時必填
        version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 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)建地圖實例
        this.map = new AMap.Map("amapcontainer", { //設置地圖容器id
          resizeEnable: true,
          zoom: this.zoom, // 地圖顯示的縮放級別
          viewMode: "3D", // 使用3D視圖
          zoomEnable: true, // 地圖是否可縮放，默認值為true
          dragEnable: true, // 地圖是否可通過鼠標拖拽平移，默認為true
          doubleClickZoom: true, // 地圖是否可通過雙擊鼠標放大地圖，默認為true
          zoom: 11, //初始化地圖級別
          center: [113.370824, 23.131265], // 初始化中心點坐標 廣州
          // mapStyle: "amap://styles/darkblue", // 設置顏色底層
        })
      }).catch(e => {
          console.log(e)
        })
    }
}

4）DOM初始化完成進行地圖初始化

在 mouted 生命周期中調用初始化地圖方法對頁面進行渲染：

 mounted() {
    // DOM初始化完成進行地圖初始化
    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: '' // '「申請的安全密鑰」',
}
export default {
  data () {
    return {
      map: null
    }
  },
  methods: {
    initAMap () {
      AMapLoader.load({
        key: "", // 申請好的Web端開發(fā)者Key，首次調用 load 時必填
        version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 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)建地圖實例
        this.map = new AMap.Map("amapcontainer", { //設置地圖容器id
          resizeEnable: true,
          zoom: this.zoom, // 地圖顯示的縮放級別
          viewMode: "3D", // 使用3D視圖
          zoomEnable: true, // 地圖是否可縮放，默認值為true
          dragEnable: true, // 地圖是否可通過鼠標拖拽平移，默認為true
          doubleClickZoom: true, // 地圖是否可通過雙擊鼠標放大地圖，默認為true
          zoom: 11, //初始化地圖級別
          center: [113.370824, 23.131265], // 初始化中心點坐標 廣州
          // mapStyle: "amap://styles/darkblue", // 設置顏色底層
        })
      }).catch(e => {
          console.log(e)
        })
    }
  },
  mounted () {
    //DOM初始化完成進行地圖初始化
    this.initAMap()
  }
}
</script>

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

四、頁面使用

在需要使用的組件中引入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>

頁面效果：