vue中使用高德地图

1.首先在官网申请密钥:https://lbs.amap.com申请密钥

2. 在index.html中引用js文件，在头部引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=刚刚申请的密钥"></script>

3.在 webpack.config.js 配置文件中配置AMap

entry: {

        app: './src/main.js'

  },

  externals:｛

            "AMap": "AMap",

  }

4.在引用地图的组件中创建一个容器，定义容器的宽高

<div id="all-map" class="map" ></div>

.map{

            width: 600px;

            height: 600px;

}

5.在引用地图的组件中引入AMap，否则会报”AMap undefined”的错误

import AMap from 'AMap'

6.在methods中定义创建地图的方法

GaodeMap(){

                var map = new AMap.Map('all-map', {

                        center: [116.397428, 39.90923], // [纬度，经度]

                        resizeEnable: true,

                        zoom: 10

                });

                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {

                        map.addControl(new AMap.ToolBar())

                        map.addControl(new AMap.Scale())

                })

}

7.在mounted生命周期中调用刚刚定义好的方法

mounted(){

             this.GaodeMap()

 }

然后会出现下面的效果：

在做项目的过程中参考其他人的经验整理的笔记