admin 管理员组

文章数量: 887021

杂文

目录:

  • 叙
  • 腾讯地图的GL 和 JavaScriptv2.0 的理解和选型推荐
    • 差异
  • 去LOGO脚标:
    • v2.0
    • GL
  • infowindow的样式问题,主要讲一下v2.0自定义好看的弹窗:
    • v2.0
    • GL:

叙

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

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

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

差异

GL:

  1. 支持三维角度查看
  2. infoWindow 比v2.0好看的一批
  3. 点位与线路初始化的都是数组方式初始化,如果定一个点用一个数组,超过500个,500个之后的点位出不来
  4. 靠浏览器渲染性能,不一定支持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}

GL:

GL的比较简单: 直接在看官网的案例, 赋予一下

本文标签： 杂文

版权声明：本文标题：杂文 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1731192098h1463517.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。