zoukankan      html  css  js  c++  java
  • 地图API文档

    腾讯地图API 2

    1.API概览... 2

    1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2

    1.2 URL API:... 2

    1.3 静态图API:... 2

    1.3 JavaScript API V2:... 2

    1.4 另外还有Android SDK, Android 定位SDK,和IOS SDK,主要用于手机端开发。     2

    2. 下面重点讲解JavaScript API V2:... 3

    2.1最简单的地图-显示一张以坐标为中心的地图制作为例:... 3

    2.2下面简单讲解几个重要的类、搜索服务。... 3

    2.2.1.Map地图核心类: 3

    2.2.2. qq.maps.LatLng 坐标类... 4

    2.2.3. qq.maps.Marker 标注类... 4

    2.2.4.Convert坐标转换类... 5

    2.2.5. qq.maps.place.Autocomplete 智能提示类... 5

    2.2.6. qq.maps.Geocoder 地址-经纬转换类... 6

    2.2.7. qq.maps.SearchService Poi搜索服务类... 6

    2.2.8. qq.maps.TransferService 公交换乘方案服务类... 7

    2.2.9. qq.maps.LineService公共交通线路详情服务类... 8

    2.2.10. qq.maps.DriveService驾车路线获取服务类... 8

    2.2.11. qq.maps.event 对象... 9

    2.3 地图的四大重要功能... 9

    2.3.1 关键字搜索... 9

    2.3.2 兴趣点搜索... 9

    2.3.3 导航... 10

    2.3.4 地址~经纬坐标解析... 10

    腾讯地图API

    1.API概览

    1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):

    因为JS不支持跨域访问,所以最好在后端c#处理:发出请求(可以按需指定方法、参数)=》后端c#获取回复信息=》后端c#处理信息,或交给前端js再次处理。

    适用于将查询到的信息储存或其他非显示的操作,如写入数据库、传给其他程序等。

    链接:http://open.map.qq.com/webservice_v1/index.html

    1.2 URL API:
        可以直接在浏览器中输入链接地址+参数,即可打开腾讯地图功能并看到地图,之后便可以操作。

    一般用法是

    <iframe src="http://apis.map.qq.com/uri/v1/search?keyword=酒店&region=北京&referer=tengxun">

    </iframe>

    或者用js重新打开一个网页,location地址为:链接地址+参数。

    链接:http://open.map.qq.com/uri_v1/index.html

    1.3 静态图API:

    适用于只需要显示简单一张地图图片(显示中心点、打上标志),而没有拖拉、再次搜索或处理的功能。

    一般用法是在前端html页面中写入标签:<img src="http://st.map.qq.com/api?size=604*300&center=116.39782,39.90611&zoom=16" /> 即可显示出该静态图片,可以按需指定参数。

    链接:http://open.map.qq.com/static_v1/index.html

    1.3 JavaScript API V2:

    是一套功能最完整的API,主要使用JS编写代码、显示,支持手持式设备、PC页面。

    链接:http://open.map.qq.com/javascript_v2/doc/index.html

    1.4 另外还有Android SDK, Android 定位SDK,和IOS SDK,主要用于手机端开发。

    2. 下面重点讲解JavaScript API V2:

    主要资源:

    开发指南(入门了解):http://open.map.qq.com/javascript_v2/guide.html

    参考手册(编码实现):http://open.map.qq.com/javascript_v2/doc/index.html

    示例写法(各种方法、操作的简单示例):http://open.map.qq.com/javascript_v2/demo.html

    2.1最简单的地图-显示一张以坐标为中心的地图制作为例:

    Step 1:建立html或者apsx网页,在<body>主体新建<div id="container">,该div用来放置地图显示。务必指定长宽样式,API不会自动控制该大小,否则地图不显示(因为div大小为0)。

    Step2:在网页<head>处引入Tencent Map Js: <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

    其中key=YOUR_KEY申请免费,可以不写但是强烈建议写上。具体详见:

    http://open.map.qq.com/javascript_v2/guide.html下的Key鉴权部分。

    Step3:写地图js代码,并设置<body onload="init()">

            //声明地图全局变量,方便使用

            var map;

            //初始化函数,页面载入时加载

            function init() {

                //新建一个(纬,经)坐标

                var center = new qq.maps.LatLng(39.916527, 116.397128);

                //将地图显示在div container上

                map = new qq.maps.Map(document.getElementById('container'), {

                    center: center, //指定地图中心

                    zoom: 18   //缩放级别,范围0-18,18放大倍数最高

                });

            }

    这样完成了第一个地图应用,启动页面即可看到效果。

    全部代码见: 最简单的地图Demo.htm

    2.2下面简单讲解几个重要的类、搜索服务。

    2.2.1.Map地图核心类:

    详见http://open.map.qq.com/javascript_v2/doc/map.html

    API中的核心类,用来在网页中创建一个地图。

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

    参数:

    mapContainer : {HTMLDIVElement | string}

    options : {MapOptions}

    注意MapOptions,详见http://open.map.qq.com/javascript_v2/doc/mapoptions.html

    几个重要属性:

    名称

    类型

    说明

    center

    LatLng

    初始化地图中心坐标

    zoom

    Number

    初始化地图缩放级别

    noClear

    Boolean

    如果为 true,在初始化地图时不会清除地图容器内的内容

    boundary

    LatLngBounds

    boundary规定了地图的边界,当拖拽超出限定的边界范围后,会自动移动回来

    mapTypeId

    MapTypeId

    地图类型ID

    2.2.2. qq.maps.LatLng 坐标类

    详见http://open.map.qq.com/javascript_v2/doc/latlng.html

    以纬度和经度表示的地理坐标点

    构造函数:LatLng(lat:Number, lng:Number)

    在地图中表示一个点,可用作地图中心、标注、目标起始点。需要注意的是tencent map 的坐标并不等于标准的WGS84坐标,事实上每个地图厂商的坐标都有一定偏移算法,需要转换,若腾讯地图的坐标用到百度地图上,需要转换,详见“2.2.5.Convert转换类”。

    2.2.3. qq.maps.Marker 标注类

    详见http://open.map.qq.com/javascript_v2/doc/marker.html

    在map上显示标志。

    构造函数,Marker(options:MarkerOptions),MarkerOptions属性如下:

    名称

    类型

    说明

    animation

    MarkerAnimation

     

    clickable

    Boolean

     

    draggable

    Boolean

     

    flat

    Boolean

     

    map

    Map

     

    position

    LatLng

     

    //在地图上显示marker

    var marker = new qq.maps.Marker({

                                map: map,

                                position: new latLng(Number, Number)

                            });

    //清除地图上的marker

            function clearOverlays(markersArr) {

                var marker;

                while (marker = markersArr.pop()) {

                    markers.setMap(null);   //解除绑定关系

                }

            }

    2.2.4.Convert坐标转换类

    详见http://open.map.qq.com/javascript_v2/doc/convertor.html

    将标准经纬度或其他地图经纬度转换为腾讯地图经纬度坐标。只含一个静态方法。

    方法

    返回值

    说明

    translate(points:LatLng | Point | Array.<LatLng> | Array.<Point>, type:Number, callback:Function)

    none

    将其他地图服务商的坐标批量转换成搜腾讯地图经纬度坐标。type用于说明是哪个服务商的坐标。 type的可选值为 1:gps经纬度,2:搜狗经纬度,3:百度经纬度,4:mapbar经纬度,5:google经纬度,6:搜狗墨卡托。

    2.2.5. qq.maps.place.Autocomplete 智能提示类

    详见http://open.map.qq.com/javascript_v2/doc/autocomplete.html

    务必引入

    <script type="text/javascript"

    src="https://maps.google.com/maps/api/js?sensor=false&libraries=places">

    </script>

    文本输入的智能提示。

    构造函数

    Autocomplete(inputElement:HTMLElement, options?:AutocompleteOptions)

    2.2.6. qq.maps.Geocoder 地址-经纬转换类

    详见http://open.map.qq.com/javascript_v2/doc/geocoder.html

    用于在地址和经纬度之间进行转换的服务。

    构造函数

    Geocoder(opts?:GeocoderOptions)

    方法

    返回值

    说明

    getAddress(latlng:LatLng)

    none

    根据指定的坐标进行解析。

    getLocation(address:String)

    none

    根据指定的地址进行解析。

    setComplete(callback:Function)

    none

    设置检索成功后的回调函数。参数对象:{type:ServiceResultType.GEO_INFO,detail:Object.}

    setError(callback:Function)

    none

    设置检索失败后的回调函数。

    2.2.7. qq.maps.SearchService Poi搜索服务类

    详见http://open.map.qq.com/javascript_v2/doc/searchservice.html

    用于进行本地检索、周边检索关键字地址就或兴趣点(如“影院”,“加油站”)等服务。

    构造函数:SearchService(opts?:SearchServiceOptions)

    SearchServiceOptions全部属性:

    名称

    类型

    说明

    complete

    Function

    检索成功的回调函数。参数对象:{type:ServiceResultType,detail:Object.|AreaInfo>}

    error

    Function

    检索失败的回调函数

    pageIndex

    Number

    页码。

    pageCapacity

    Number

    每页的结果数。

    location

    String

    默认检索范围。

    map

    Map

    展现结果的地图实例。

    panel

    String | HTMLDivElement

    展现结果的HTML容器id或元素。将搜索结果按次序显示在此,可点击。

    SearchService方法:

    方法

    返回值

    说明

    search(keyword:String)

    none

    根据关键字发起检索。

    searchInBounds(keyword:String, latlngBounds:LatLngBounds)

    none

    根据范围和关键字进行指定区域检索。

    searchNearBy(keyword:String,center:LatLng, radius:Number)

    none

    根据中心点坐标、半径和关键字进行周边检索。

    搜索周边的必备函数。

    setLocation(location:String)

    LatLng

    设置默认检索范围(默认为全国),类型可以是坐标或指定的城市名称,如:“北京市”。

    2.2.8. qq.maps.TransferService 公交换乘方案服务类

    详见:http://open.map.qq.com/javascript_v2/doc/transferservice.html

    用于获取公交换乘线路方案的服务。

    构造函数

    TransferService(opts?:TransferServiceOptions)

    方法

    返回值

    说明

    search(start:String | Poi | LatLng, end:String | Poi | LatLng)

    none

    发起公交换乘检索。 - start: 起点,参数可以是关键字、Poi实例,或者LatLng坐

    2.2.9. qq.maps.LineService公共交通线路详情服务类

             详见: http://open.map.qq.com/javascript_v2/doc/lineservice.html

    用于检索一条公交线路详情信息的服务。

    构造函数

    LineService(opts?:LineServiceOptions)

    方法

    返回值

    说明

    searchById(lineId:String)

    none

    根据给定的公交线路Id,进行公交线路信息检索,得到该公交线路的详细信息。

    2.2.10. qq.maps.DriveService驾车路线获取服务类

    详见:http://open.map.qq.com/javascript_v2/doc/drivingservice.html

    用于获取两个或多个位置之间驾车路线的服务。

     

    DrivingService(opts?:DrivingServiceOptions)

    方法

    返回值

    说明

    search(start:String | Poi | LatLng, end:String | Poi | LatLng)

    none

    发起驾车路线检索。 - start: 起点,参数可以是关键字、Poi实例,或者LatLng坐标。 - end: 终点,参数可以是关键字、Poi实例,或者LatLng坐标。

    setPolicy(policy:DrivingPolicy, time:String)

    none

    设置本次获取驾车路线的策略。 - time是时间,当且仅当policy为PREDICT_TRAFFIC时生效,格式为"day mm:ss",例如“0 05:30”代表周日上午5点30分。day为星期,0代表周日,1—6代表周一至周六。mm:ss为24小时制,预测时间以半小时为间隔。

    clear()

    none

    清空当前结果在map和panel中的展现。

    2.2.11. qq.maps.event 对象

    用作为地图、控件、等其他对象附加事件,但还需自己实现方法。

    方法

    返回值

    说明

    addDomListener(element:HTMLElement, eventName:String, handler:Function)

    MapsEventListener

    绑定Dom事件

    addDomListenerOnce(element:HTMLElement, eventName:String, handler:Function)

    MapsEventListener

    绑定Dom事件,触发一次后自动移除该绑定

    addListener(instance:Object, eventName:String, handler:Function)

    MapsEventListener

    注册对象事件

    addListenerOnce(instance:Object, eventName:String, handler:Function)

    MapsEventListener

    注册对象事件,触发一次后自动移除该事件

    removeListener(listener:MapsEventListener)

    none

    删除指定的事件侦听器

    clearListeners(instance:Object, eventName:String)

    none

    删除该对象上指定事件的所有侦听器

    trigger(instance:Object, eventName:String, var_args:*)

    none

    触发指定对象的指定事件

    2.3 地图的四大重要功能

    2.3.1 关键字搜索

    有地区范围性若有多个符合点则列表显示。一般用名称为SearchService,LocalSearch服务类,需要设定搜索范围,结果绑定在地图或者div上,或者自己写js代码解析结果数组并用html显示.

    2.3.2 兴趣点搜索

    通常是在某地点附近搜索相关产业,比如在火车站附近搜索酒店,在景区附近搜索餐馆。一般有个范围,比如半径1000m之类,或者某个商区、行政区附近。一般用名称为SearchService,LocalSearch服务类的searchInBounds(),searchNearby()的方法。

    2.3.3 导航

    分为步行、公交、驾车,一般用名称为TrafficRoute、DriveService的服务类,需要设定起始地(为关键字或者经纬度),还有不走高速、最短距离等条件通常在该服务类的构造函数中指定Options。若存在不明确的地方需要再次选择。结果自动绑定在地图或者div上,或者自己写js代码解析结果数组并用html显示(高德地图智能自己写代码)。

    2.3.4 地址~经纬坐标解析

    用Geocoder服务类的GetPoint(),实现地址=>经纬度的解析。

    或GetLocation(),实现经纬度=>地址的解析,俗称逆解析。

    为了更好点交流和学习,请大家在参阅博客后,留下你的疑问和宝贵意见。谢谢!!!!
  • 相关阅读:
    标签的讲解
    属性分类
    LeetCode 003. 无重复字符的最长子串 双指针
    Leetcode 136. 只出现一次的数字 异或性质
    Leetcode 231. 2的幂 数学
    LeetCode 21. 合并两个有序链表
    象棋博弈资源
    acwing 343. 排序 topsort floyd 传播闭包
    Leetcode 945 使数组唯一的最小增量 贪心
    Leetcode 785 判断二分图 BFS 二分染色
  • 原文地址:https://www.cnblogs.com/fshmjl/p/4822414.html
Copyright © 2011-2022 走看看