美文网首页程序猿~
腾讯地图——web开发学习

腾讯地图——web开发学习

作者: 红笔黑字 | 来源:发表于2019-03-21 18:22 被阅读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.地图组件

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

相关文章

  • 腾讯地图——web开发学习

    类型:web开发 JavaScript API 官方文档入口 我是根据自己需求进行阅读的,所以可能蛮多地方不会归...

  • 微信小程序使用腾讯地图—路线规划

    想要使用腾讯地图,首先要在腾讯地图开发平台先注册账号,申请key腾讯地图开放平台[https://lbs.qq.c...

  • 一文教你跑通3D地图demo

    本教程旨在快速跑通地图demo,适合零基础的开发学习,选用的是腾讯地图的demo,此地图demo能够实现基础的地图...

  • 微信小程序集成腾讯地图--路线规划

    想要集成腾讯地图,首先要在腾讯地图开发平台先注册账号,申请key腾讯地图开放平台 提交申请之后,key值就算申请好...

  • 腾讯地图开发

    一、 开发环境 react全家桶(react,react-router,redux) 二、功能 定位、省市地图切换...

  • 0825_基于lbs的服务应用开发

    新内容(基于lbs的服务应用开发) lbs公开接口: 百度地图 腾讯地图 Google地图 百度地图接口简单使用 ...

  • iOS地图

    前言 在实际开发中,我们常用的地图无非那几家---- 高德地图、百度地图、腾讯地图、搜狗地图等等。重点说明高德、百...

  • 地图产品开发必备知识

    成熟的地图平台有谷歌地图、百度地图、腾讯地图、高德地图等。 学习了解地图API,包括JavaScript API、...

  • 地图功能实现

    具体实现,如下, 打开百度地图开放平台 进入页面,点击 开发文档 -> web开发 -> javaSc...

  • 微信小程序开发:腾讯地图集成步骤

    在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾...

网友评论

    本文标题:腾讯地图——web开发学习

    本文链接:https://www.haomeiwen.com/subject/hkvnmqtx.html