腾讯地图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>

或者用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

务必引入

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

地图API使用文档-以腾讯地图为例的更多相关文章

RESTful API接口文档规范小坑
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 前后端分离的开发模式,假如使用的是基于RESTful API的七层通讯协议,在联调的时候,如何避免配合过程中出现问 ...
Openstack api 学习文档 & restclient使用文档
Openstack api 学习文档 & restclient使用文档转载请注明http://www.cnblogs.com/juandx/p/4943409.html 这篇文档总结一下我初 ...
CYQ.Data 轻量数据层之路优雅V1.4 现世附API帮助文档(九)
继上一版本V1.3版本发布到现在,时隔N天了:[V1.3版本开源见:CYQ.Data 轻量数据层之路华丽V1.3版本框架开源] N天的时间,根据各路网友的反映及自身的想法,继续修改优化着本框架,力 ...
Openstack python api 学习文档 api创建虚拟机
Openstack python api 学习文档转载请注明http://www.cnblogs.com/juandx/p/4953191.html 因为需要学习使用api接口调用openstack ...
api(接口)文档管理工具
api(接口)文档管理工具欢迎光临:博之阅API管理平台 ,做为一个app开发者,还没有用到api管理工具,你就OUT了点击进入:程序员精华博客大全
用Swashbuckle给ASP.NET Core的项目自动生成Swagger的API帮助文档
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Swashbuckle给ASP.NET Core的项目自动生成Swagger的API帮助文档.
MyEclipse下查看Java API帮助文档
每次重装JDK或者升级JDK时,都会忘了如何使MyEclipse关联帮助文档.然后,再花十几分钟重新google搜索,麻烦! 首先下载Javadoc api帮助文档,google搜一下就行了. MyE ...
API的文档自动生成——基于CDIF的SOA基本能力
当前,作为大部分移动app和云服务后台之间的标准连接方式,REST API已经得到了绝大部分开发者的认可和广泛的应用.近年来,在新兴API经济模式逐渐兴起,许多厂商纷纷将自己的后台业务能力作为REST ...
asp.net web api 构建api帮助文档
1 概要创建ASP.NET Web Api 时模板自带Help Pages框架. 2 问题 1)使用VS创建Web Api项目时,模板将Help Pages框架自动集成到其中,使得Web Api项目 ...

随机推荐

Android 生成和Pull解析xml
一.单个对象生成xml 生成以下xml,该怎么生成呢? <?xml version='1.0' encoding='UTF-8' standalone='yes' ?> <accou ...
[LintCode] Interleaving Positive and Negative Numbers
Given an array with positive and negative integers. Re-range it to interleaving with positive and ne ...
简单几何(判断矩形的位置) UVALive 7070 The E-pang Palace(14广州B)
题目传送门题意:给了一些点,问组成两个不相交的矩形的面积和最大分析:暴力枚举,先找出可以组成矩形的两点并保存起来(vis数组很好),然后写个函数判断四个点是否在另一个矩形内部.当时没有保存矩形,用 ...
MONO 说谈
Xamarin android现在到底依赖Dalvik不?是部分依赖的驱动编译后的IL经过CLR并不能直接成为机器码,而是要借助Dalvik才能成为机器码吗? 而是关于Android的驱动部分主 ...
TYVJ P1072 bomb Label：看不懂题意
描述一场战争正在A国与B国之间如火如荼的展开.B国凭借其强大的经济实力开发出了无数的远程攻击导弹,B国的领导人希望,通过这些导弹直接毁灭A国的指挥部,从而取得战斗的胜利!当然,A国人民不会允许这样的 ...
TYVJ P1088 treat Label：鞭笞人的DP
时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景广东汕头聿怀初中 Train#2 Problem2 描述给出长度为N的数列{A_i},每次可以从最左边或者最 ...
COJ0702 数学（三）
数学(三) 难度级别:D: 运行时间限制:1800ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述给出两个正整数a,b,求a*b. 输入输入共两行,每行是一个正整 ...
Uiautomator打包使用第三方库，报错的解决方案
问题引源: 在做自动化过程中,想在用例执行完毕后,自动生成该用例测试报告: 报告定义为Excel格式文件,且在用例执行过程中生成. 所以我在Uiautomator工程中引用了jxl.jar,用以处理E ...
shell函数
1. 定义 : func() { } 或 function func() { } 2.参数 func 1 2 3 4 可在函数中直接调$1来使用,>=10的用${n}
bundle的理解笔记
Bundle是一个键值对这样一个东西.就是一个string类型的东西,对应任何类型的东西.就是用来存值的. 这里可以看到他的作用 public void onClick(View v) { Strin ...

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