1. 程式人生 > >vue-cli中使用高德地圖

vue-cli中使用高德地圖

1.index.html

   高德地圖基礎元件

    <scripttype="text/javascript"src="http://webapi.amap.com/mapsv=1.4.4&key=你的key"></script>

    高德地圖ui元件,如果你沒有使用ui元件的話,可以不引用

    <script src="http://webapi.amap.com/ui/1.0/main.js" type="text/javascript" charset="utf-8"></script>

2.webpack.base.conf.js中修改配置

 externals: {
 'AMap': 'AMap'

}

3.需要使用地圖的vue中

    import AMap from 'AMap'

    that.map = new AMap.Map('map-container', {
zoom: 18,
center: [117.471564,34.366127]

    })

    其他的配置跟高德地圖文件一樣,不熟悉的同學可以開啟下面的連結看一看