vue2（webpack）调用amap高德地图及其UI组件和标记物

Posted 2021-04-29 哎呦程序猿

1、申请key

   

首先要去高德官网申请key，创建应用，然后申请key，后期要用到，如果已经有key，忽略这一步 ，连接地址：

http://lbs.amap.com/dev/key/app

2、修改配置

首先要在build/webpack.base.conf.js 加入如下配置，负责vue中使用import会报错。 如果如下导入还AMap报错，请使用window.AMap。因为后边要使用高德的infowindow，最简单的不好扩展，而且没有点击事件，所以用用到了高德的ui。位置见下图

3、调用高德地图

• 首先在index.html中加入如下引用

  
  

• 新建一个map.vue组件

        在script中引入如下组件，如果第二步不配置，这里会报错

如果前边都操作了，import AMap还报错undefined的话，有个终极大招，那就是直接加入如下注释，并且把 import AMap 删除掉，意思是告诉eslint忽略这块的检查，因为在index.html引入是全局引入，所以可以直接使用。

template中加入map的div,注意如果map不显示，没报错的时候，请检查div的宽高。

然后再mounted中初始化地图，这时候地图就会显示出来了，但是没有任何组件，注意vue2废弃ready，请使用mounted。代码位置不懂的看图片 

两个组件：放大缩小按钮和图层的切换

使用高德定位

4、地图添加标记物和信息框 marker和infowindow

因为我从后台取到的点是gps定位的点，因为坐标系不同，所以要将gps的点转成高德坐标系的点；点击marker显示infowindow,并给infowindow添加点击事件

5、最后效果图

.

第一张这个title是准备做浮动布局，做返回按钮和标题栏的，还没写css。第二章是最后做完的效果图。

---

编辑：yuanyuan

本文出自「哎呀程序猿」

如果你有好的文章想推荐，请私信后台！