地图API使用文档-以腾讯地图为例

admin 2018-3-30 473

目录

腾讯地图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(),实现经纬度=>地址的解析,俗称逆解析。


最新回复 (0)
全部楼主
返回
发新帖
老师机论坛