程序猿~

腾讯地图——web开发学习

2019-03-21  本文已影响0人  红笔黑字

类型:web开发 JavaScript API

官方文档入口

我是根据自己需求进行阅读的,所以可能蛮多地方不会归纳进来

文档解读

注意事项

1.快速入门——定位——web定位组件
        貌似由于安全性原因,精确定位只能是https了

快速入门——接入指引,注册申请好密钥后,就可以根据自己的需求阅读文档了。
我的:产品——web开发——JavaScript API

简单看下案例后便直接可以看参考手册了:

1.一切由new开始

      new qq.maps.Map(mapContainer, options);
      mapContainer:你要放的盒子
      options:各种参数

2.new qq.maps.Map(mapContainer, options);

     options详解:https://lbs.qq.com/javascript_v2/doc/mapoptions.html
       常用:
              center、zoom、minZoom、maxZoom、backgroundColor、boundary...
              包括了中心位置、缩放级别、地图类型、边界、鼠标键盘操作及样式、各类控件等...
        一开始没写进options,如需后续添加:
                如:边界(关于这里,我感觉文档把东南西北的经纬度搞反了)
                        var sw = new qq.maps.LatLng(39.96693, 116.49369); //西南角坐标
                        var ne = new qq.maps.LatLng(39.88795, 116.28666); //东北角坐标
                        var latlngBounds = new qq.maps.LatLngBounds(ne, sw); //矩形的地理坐标范围

参数查看和设置:一般是get和set方法
举个栗子:getBounds() 返回当前视野范围 setCenter() 设置地图中心位置

3.控件(control)

这些控件,本人几乎没用,如要关闭,可以一次性关闭:

disableDefaultUI: true //禁止所有控件
范例
这个参数为什么没在控件的文档里看到呢?因为,它被放在了示例里:
示例

重要:很多东西,其实可以直接去示例里看,更直观,因为是直接面向功能的。

4.覆盖物(marker)

这一块参数比较多,可以定位置、动画效果、可见性等,下面列了我常用的

1.创建一个Marker
    var marker=new qq.maps.Marker({参数})
    draggable  拖动
    clickable  点击
    shape    可点区域
2. qq.maps.InfoWindow类
    信息窗口
    open()和close()方法
    getContent()获取信息窗口中的内容
    我习惯在窗口内添加标签,这样可以点击、跳转
3.叠加覆盖物(qq.maps.GroundOverlay 类)
    需要设置边界、图片地址、覆盖透明度、响应鼠标事件等
    可以设置大的背景图,比如说:要展示某个省的省花,就放入大的背景图进去
4.自定义覆盖物(## qq.maps.Overlay 类)
    如果觉得infowindow有框不好看,就可以完全自定义
5.MapPanes
    叠加层的层级
6.折叠物

5.服务

待填充

6.事件

事件的监听比较丰富有用

绑定dom
        addDomListener
绑定dom,触发一次解除
        addDomListenerOnce
注册对象事件
        addListener
        addListenerOnce
删除指定事件的监听器  
        removeListener
删除该对象上指定事件的所有侦听器。
        clearListeners
触发指定对象的指定事件
        trigger

7.自定义瓦片地图

范例

直接套用的范例的代码,以下直接套用的注意事项:
1. zoom和图片的关系:1级zoom,需要4的1次方的图
2. 图片命名:z为缩放级别,x代表横轴,y代表纵轴,序号从0开始
3. 图片排序:从左到右、从上到下

8.地图组件

位置展示组件
路线规划组件
地图选点组件
前端定位组件
街景组件
上一篇下一篇

猜你喜欢

热点阅读