vue高德地图marker批量标记与InfoWindow提示框 |
您所在的位置：网站首页 › 高德地图怎样标记多个地点 › vue高德地图marker批量标记与InfoWindow提示框 |
vue高德地图marker批量标记与InfoWindow提示框
|
一、前言
由于数据量大，如果一个一个添加marker会造成页面卡顿，所以在此就使用了批量标记，特此研究出一下几种方法 在高德平台获取key 高德开放平台 | 高德地图API 二、批量添加marker标记1、海量点标记 MassMarks 优点：当需要在地图展示数量为十万以内的点并且需要较好的性能表现时 缺点：只能使用图片标点，不能自定义标点 用法： var styleObject = { // 样式 url: '//vdata.amap.com/icons/b18/1/2.png', // 图标地址 size: new AMap.Size(11,11), // 图标大小 anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角 } var styleObject2 = { // 样式 url: '//vdata.amap.com/icons/b18/1/1.png', // 图标地址 size: new AMap.Size(11,11), // 图标大小 anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角 } // 样式对象数组 var styleObjectArr = [ styleObject, styleObject2]; // 实例化 AMap.MassMarks var massMarks = new AMap.MassMarks({ zIndex: 5, // 海量点图层叠加的顺序 zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层 style: styleObjectArr //多种样式对象的数组 }); // 设置了样式索引的点标记数组 var data = [{ lnglat: [116.405285, 39.904989], name: 'beijing', id:1, style: 0 // 该数据的样式取值styleObjectArr对应的样式索引 },{ lnglat: [116.405285, 39.904989], name: 'beijing', id:1, style: 1 } //, …,{}, … ]; // 将数组设置到 massMarks 图层 massMarks.setData(data); // 将 massMarks 添加到地图实例 massMarks.setMap(map);具体可看官方用例：加载海量点-点标记-示例中心-JS API 示例 | 高德地图API 2、点聚合 MarkerClusterer 优点：在不同的地图缩放级别对海量的数据点进行聚合展示，可以通过renderClusterMarker自定义marker样式 由于本数据不需要聚合显示，而且还需要指定一marker样式内容，所以具体用法请看官方示例：点聚合-点标记-示例中心-JS API 示例 | 高德地图API 3、map.add(markers) 优点：可以批量添加marker，并且可以自定义marker样式，刚好满足本人需求😀 用法： addCluster(arr) { // 当获取到后台数据时 把参数传到该方法 arr 内容必须包含 lon 与 lat this.map.remove(this.markers) // 清除所有的marker标记 this.markers = [] // 清空 // 添加marker标记 arr.forEach(item => { this.markers.push(this.getGraphicMarker(item)) }) this.map.add(this.markers) // 动态添加数据 }， getGraphicMarker(item) { // 指定单个marker 标记的内容 let markerContent = '自定义内容' // 自定义marker样式及内容 let marker = new AMap.Marker({ position: new AMap.LngLat(item.lon, item.lat), content: markerContent, // 添加自定义内容 // icon: require('../../assets/houseIcon.png'), // 也可以添加图片 offset: new AMap.Pixel(-12, -10) }) marker.on('click', e => { // 添加点击事件 this.addMarkerTip(item, e) }) return marker },注意：如果在css中设置自定义内容的div样式 请使用 /deep/ 穿刺，否则无效 效果图
结合这上个代码片段，为每个marker添加点击事件中的addMarkerTip方法，直接上代码展示 addMarkerTip(item) { // item 为当前点击的内容 // 添加点击marker时的提示 if (this.markerTip) { this.markerTip.close() // 关闭提示 } let markerTipContent = "自定义内容" // 自定义提示框内容 this.markerTip = new AMap.InfoWindow({ // 提示插件 position: new AMap.LngLat(item.lon, item.lat), // 经纬度 content: markerTipContent, offset: new AMap.Pixel(2, -6) // 便宜位置 }) this.markerTip.open(this.map) // 为markerTipContent中的元素绑定事件 setTimeout(() => { // 为了获取到 动态添加的元素 用延迟来获取 动态绑定事件 document.querySelector('#btn').addEventListener('click', () => { // 添加详情事件 consloe.log(item) }) }, 100) }, 四、清除左下角的高德地图的logo1、实在本组件中动态添加script标签映入地图，就在本组件中使用/deep/穿刺添加如下样式 ::v-deep .amap-logo { display: none; opacity: 0 !important; } ::v-deep .amap-copyright { opacity: 0; }2、如果是在html页面中引入的地图，就直接在html中的style标签中添加 .amap-logo { display: none; opacity: 0 !important; } .amap-copyright { opacity: 0; } 五、动态添加清除地图图层本文已卫星图层为例 satellite = new AMap.TileLayer.Satellite() // 实例化得到卫星图层 satellite.setMap(map) // 动态添加到地图中 satellite.setMap(null) // 删除该图层 结语：欢迎大家与小编一起多多探讨，共同进步噢😊 |
【本文地址】
今日新闻 |
推荐新闻 |