1. 首页首页
  2. 编程汇总编程汇总

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

编程汇总 • • 阅读 29

vue 集成高德地图进行批量标注和信息窗体展示vue 集成高德地图进行批量标注和信息窗体展示 高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能 其实高德 api 里面已经清楚的说明怎么用了 但是自己总结一下记录在自己的笔记里 也是有些许好处的 高德 api 样列展示地址是 https lbs amap

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”

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

externals: {

    AMap: 'AMap',

    AMapUI: 'AMapUI'

  }

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

import AMap from 'AMap'

import AMapUI from 'AMapUI'

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

查看getToliteList（）该方法即可知道怎么实现。

编程小号
上一篇 2025-03-15 07:30
下一篇 2025-02-11 15:21

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/113503.html