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

本文主要是介绍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（）这个方法里面的实现

这篇关于vue 集成高德地图进行批量标注和信息窗体展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---