vue-cli项目(vue2)引入高德地图

261 阅读1分钟

1、申请高德KEY。

2.在项目中的html.index中引入标签并加载相关插件

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=zzXmTOzv5QDtMW1GjLBHnGfPM2KXUBYP"></script>

3.在项目build/webpack.base.conf.js中加入如下代码:

externals: { 'AMap': 'AMap'}


4.在vue文件中引入 
import AMap from "AMap";


5.参考高德地图开发文档new一个实例出来使用


常见的高德地图配置:

禁止拖拽和放大两个属性:

zoomEnable: false,

dragEnable: false,