腾讯地图——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.地图组件
位置展示组件
路线规划组件
地图选点组件
前端定位组件
街景组件