Vue学习笔记-高德地图组件

公司之前一直使用的是百度地图组件，最近运营人员一直反映一个问题：有一些地区在百度地图上搜不到，地址搜索没有响应。我以为是地图API版本不对，更新了版本，这个问题还是存在。于是我就考虑换一个地图组件也解决这个问题，于是高德就成了我的第一选择。

准备工作：

在高德开放平台，注册成为开发者。

高德开发者平台-应用.png

申请Key，我申请的是Web端（JS API），不同的API效果可能不一样。

实现方式：

一：引入 高德，web-sdk （两种方式）

1:在index.html 中引入

2:安装vue-amap

Vue-amap基于Vue2.0的高德地图的地图组件。

 cnpm install vue-amap --save

二.在webpack.base.conf.js加入

externals: {
    'AMap': 'AMap',
}

三.实例

1.方式一

效果如图：

方式一.1.png

方式一.2.png

2.方式二

封装一个mapDrag的组件

在需要使用的地方调用

效果如图：

方式二.2.png

方式二.1.png

相关资料：

• 高德地图官方文档
• vue-amap官方文档