杂文-腾讯地图--JavaScript GL 和 JavaScriptv2.0

叙

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="http://map.qq.com?ref=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.style
            divStyle.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').value
              if (!busPointerName) {
                _this.$message({
                  message: '请填写车站名称',
                  type: 'error'
                })
                return
              }

GL:

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