vue.js 使用高德地图

1.获取key值

　　

　　注册成为高德开发者需要分三步：

　　第一步，注册高德开发者；

　　第二步，去控制台创建应用；

　　第三步，获取Key

2.修改配置文件  webpack.base.conf.js

　　

externals: {
    'AMap': 'AMap'
  }

3.在index.html 中引入地图插件

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>

4.新建一个mapInfo.vue的组件

　　

<template>

    <div id="map" style="width:100%; height:5rem"></div>

</template>
<script>
  import AMap from 'AMap'

  export default {
    data(){
     return{
         map:null,
         marker:null
     }
    },
    mounted: function () {
      this.init()
    },
    methods: {
      init: function () {
        let self =this
        self.map = new AMap.Map('map', {
          center: [116.313061, 39.979386],
          resizeEnable: true,
          zoom: 16
        })
        self.marker = new AMap.Marker({
          map:self.map,
          position: new AMap.LngLat('116.313061', '39.979386')
        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          self.map.addControl(new AMap.ToolBar())
          self.map.addControl(new AMap.Scale())
        })
      }
    }
  }
</script>
<style scoped>
</style>

地图组件开发完成