Vue組件中引入高德地圖Gmap

VUE-CLI 3.0 中配置高德地圖

在項目開發中，有時需要加載地圖控件，這里記錄下載vue-cli中引入地圖控件的基本流程。

 

1、首先，需要注冊高德開放平台的賬號，並在【應用管理】頁面【創建新應用】，為應用添加Key值

高德開放平台：https://lbs.amap.com/

 

2、在Vue-Cli中public下的index.html加入script 標簽

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申請的key"></script> 

 

3、在vue.config.js文件中配置externals

VUE-CLI 3.0 不會自動創建vue.config.js，需要手動創建，同時vue.config.js 不會觸發熱加載，修改之后需要重新執行npm run serve

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    }
  }
}

 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

也可以不在vue.config.js中配置externals，在子組件調用時高德地圖的api時，也不需要引入（import），直接可以采用window.AMap.Map加載地圖，此時AMap為默認的對象，可以在控制台打印出來：

 

 地圖組件中寫為：

initMap () {
      let self = this
      let map = new window.AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 10
})

  

4、封裝作為組件使用

在src/component建立子組件，建立一個div 盒子，用於地圖容器，設定id，之后通過AMap.map()函數建立新地圖

<template>
  <div>
    <div id="container" :style="{width:width+'px',height:height+'px',margin:'34px auto'}" />
  </div>
</template>

<script>
import AMap from 'AMap' //引入高德地圖AMap
export default {
  name: 'GMap',
  props: {
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    }
  }, //添加變量，方便組件復用
 methods: {
//初始化地圖
   initMap () {
      let self = this
      let map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 10
      })
      self.map = map
    }
  },
//在mounted階段調用（mounted可以操作DOM）
 mounted () {
    this.initMap()
  }
}
</script>

 

5、在pages頁面下新建組件，並復用地圖組件 

 

 6、最終效果圖