`Google Map`自定义叠加层的实现

1、触发：

// 返回结果的数组，拿到有效的值存进数组
let newArr = res.filter((item) => {return item.list.length !== 0
})
/*
[{id: 110latitude: 32.838939245list: Array(1)longitude: 108.644363426name: "中国"
}]
*/
this.createOverlayHandle(newArr)

2、创建自定义叠加层的构造函数

createOverlayHandle (list) { // 创建自定义叠加层const _self = thisUSGSOverlay.prototype = new window.google.maps.OverlayView() // 继承overlayViewfunction USGSOverlay () { // 存放需要放的属性this.list_ = listthis.divs = []this.latLngItem = []this.setMap(_self.maps)}USGSOverlay.prototype.onAdd = function () { // 添加的方法：控制渲染成自定义的模板this.getPanes().overlayLayer.innerHTML = ''this.list_.forEach((item) => {let div = document.createElement('div')div.classList.add('custom')let H, Wif (item.list.length <= 5) {W = '60px'H = item.list.length * 16} else {W = '120px'H = Math.ceil((item.list.length / 2)) * 16}div.style.cssText = `width: ${W}; height: ${H}px; background-color: rgba(0,0,0,0.5); position: absolute;`item.list.forEach((i) => {div.innerHTML += `<div style="width: 60px; height: 16px; float: left; padding: 1px 1px;"><img style="width: 14px; height: 14px; float: left;" src="${require(`@/assets/img/tree_marker_icon/${i.category_icon}.png`)}" /><span style="width: calc(100% - 14px); height: 14px; text-align: center; float: left; color: #fff; font-size: 12px; line-height: 14px">${i.nums}</span></div>`})this.divs.push(div)this.latLngItem.push(item)let panes = this.getPanes()panes.overlayLayer.appendChild(div)})}USGSOverlay.prototype.draw = function () { // 方法：绘制，确保控制left top跟随this.divs.forEach((item, index) => {let latlng = new window.google.maps.LatLng(this.latLngItem[index].latitude, this.latLngItem[index].longitude)let overlayProjection = this.getProjection()let latLng = overlayProjection.fromLatLngToDivPixel(latlng)item.style.left = latLng.x + 'px'item.style.top = latLng.y + 'px'})}USGSOverlay.prototype.onRemove = function () { // 方法：删除if (document.querySelectorAll('.custom').length !== 0) {document.querySelectorAll('.custom')[0].parentNode.innerHTML = ''}this.divs = []this.overlay = null}this.overlay = new USGSOverlay() // 创建实例化对象this.overlay.draw()this.overlay.onAdd()}

官网案例example：https://developers.google.cn/maps/documentation/javascript/examples/overlay-simple
备注：代码需要的数据，需要渲染的结构之后根据需求自行调整修改，此代码为实现当前需求。

记录：google map谷歌地图自定义叠加层overlay流程相关推荐

在bigemap中添加Google map(谷歌地图)
BIGEMAP如何添加在线google map 谷歌地图最近一直在研究如何在bigemap手机端和Gis office桌面上添加谷歌地图,经过调试,亲测有效. 谷歌卫星地图(无偏移): https: ...
google map谷歌地图瓦片地址无偏移矢量地图电子地图影像地图
前几天做谷歌地图踩大坑,目前网上很多文字的瓦片地址是可以访问但,矢量地图有偏移,你将矢量地图和影像地图同时加载出来就会发现两个地图不能完全的重合,而且连标注都没有和地图重合.那是因为矢量地图做了偏移影 ...
Google Map 谷歌地图
<script> var map;function initMap() { var position = new google.maps.LatLng(1.539187, 103.6471 ...
如何在谷歌地图自定义范围_如何在Google表格中更改和创建自定义数字格式
如何在谷歌地图自定义范围 Khamosh Pathak Khamosh Pathak By default, Google Sheets doesn't format numbers. If you' ...
maps-api-v3_Google Maps API和自定义叠加层
maps-api-v3 在上一教程中,我们研究了如何使用服务的API添加标记以及自定义Google地图的颜色和菜单. 本教程进一步介绍了如何创建自己的自定义地图并将其覆盖到Google地图(例如我的1 ...
Google maps javascript api v3 叠加层（Overlays）介绍
很多人尝试google maps api的开发,通常会涉及到在Google maps上进行标注功能的开发.Helloj2ee学习一项技术通常不在看书,而是多以帮助为主.当我看完之后,我将Overlay ...
Google Maps JavaScript API V3 叠加层
注意:以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本.该 API 的第 2 版已根据我们的弃用政策正式弃用.欢迎您将 ...
google map限制地图缩放级别和显示范围
google map限制地图缩放级别和显示范围 2010-04-07 11:06:15| 分类: 默认分类|字号订阅在使用google地图的时候,很多情况下我们希望只显示地图的一部分并限制地图的 ...
Google 地图 google map api / 地图有关
第一种效果:可搜索,可以计算参考: http://www.ditu123.com/main/google_map_api.html#The_Hello_World_of_Google_Maps 代码 ...

记录：google map谷歌地图自定义叠加层overlay流程

`Google Map`自定义叠加层的实现

记录：google map谷歌地图自定义叠加层overlay流程相关推荐

最新文章

热门文章

记录：google map谷歌地图自定义叠加层overlay流程

Google Map自定义叠加层的实现

记录：google map谷歌地图自定义叠加层overlay流程相关推荐

最新文章

热门文章

`Google Map`自定义叠加层的实现