vue 集成高德地图进行批量标注和信息窗体展示

                                    vue 集成高德地图进行批量标注和信息窗体展示

          高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能，其实高德api里面已经清楚的说明怎么用了，但是自己总结一下记录在自己的笔记里，也是有些许好处的。高德api 样列展示地址是：https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers,以及点击窗体监听事件https://lbs.amap.com/api/amap-ui/demos/amap-ui-simpleinfowindow/events，两个样列基本就实现了我们的功能，可以点击参考。

首先我们看一下所运行的效果如图所示：（图片稍后补上，因为现在接口地址已经变动，暂未部署服务器）

其次我们看一下实现思路：

一、vue引入原生高德地图

1、index.html里面加入,高德js一定要放在头部而不是尾部，否则就会报 “AMap is not defined”

<!-- 高德地图 -->

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

<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

2、build 的webpack.base.conf.js文件里面加入

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

3、引用高德地图界面加入以下内容即可以使用地图

import AMap from 'AMap'
import AMapUI from 'AMapUI'

二、高德地图界面vue代码参考，主要看getToliteList（）这个方法里面的实现