杂文

编程入门行业动态更新时间:2024-10-24 00:17:32

杂文

叙

最近写写腾讯地图相关的东西,大致是api上的东西查找与实践经验
大致脉络是点位的显示、地图显示弹框出文字绑定事件、点位移动图层的放大与缩小、还有画出路线图、去掉底下的脚标等相关的操作
谈谈我对腾讯地图的GL 和 v2.0 的理解与选型推荐

腾讯地图的GL 和 JavaScriptv2.0 的理解和选型推荐

定义: 很尴尬, JavaScript GL 和 JavaScriptv2.0 我一开始理解的是带数字的是第二版, 但其实不是哈, 是两个东西

差异

GL:

支持三维角度查看
infoWindow 比v2.0好看的一批
点位与线路初始化的都是数组方式初始化,如果定一个点用一个数组,超过500个,500个之后的点位出不来
靠浏览器渲染性能,不一定支持IE11和低版本的谷歌,体现程度是加载速度会特别慢

v2.0
1. 加载速度快
2. 样式很丑得自定义样式,比如说弹窗相关的操作
3. 去脚标跟GL的区别有区别

去LOGO脚标:

v2.0

#map [title="到腾讯地图查看此区域"] {display: none !important;
}#map div div div span {display: none !important;
}

GL

.logo-text {display: none;
}a[href="=jsapi_v3"] {display: none;
}

infowindow的样式问题,主要讲一下v2.0自定义好看的弹窗:

v2.0

2.0的样式涉及到两个方案，一个是事件处理，一个是样式，曾经也有人给我说要外嵌一个div ，别搞，这种东西经纬度，那是可以放大缩小，平移的。主要用的是CustomOverlay

  CustomOverlay.prototype = new window.qq.maps.Overlay()// 定义construct,实现这个接口来初始化自定义的Dom元素CustomOverlay.prototype.construct = function () {var div = this.div = document.createElement('div')div.className = 'el-row'div.id = 'elMapDiv'var divStyle = this.div.styledivStyle.position = 'absolute'divStyle.width = '480px'divStyle.backgroundColor = '#FFFFFF'divStyle.borderRadius = '2px'divStyle.boxShadow = '0 2px 12px 0 rgba(0, 0, 0, 0.1)'divStyle.cursor = 'pointer'this.div.innerHTML = htmlDiv// 将dom添加到覆盖物层var panes = this.getPanes()// 设置panes的层级，overlayMouseTarget可接收点击事件panes.overlayMouseTarget.appendChild(div)}let savePointer = document.getElementById('savePointer')let cancelPointer = document.getElementById('cancelPointer')savePointer.onclick = function () {let json = {}let busPointerName = document.getElementById('addPointerName').valueif (!busPointerName) {_this.$message({message: '请填写车站名称',type: 'error'})return}