腾讯地图API简介、整理

目录

腾讯地图API 1

1.API概览... 1

1.1 WebService API（官网注明是beta版本，可能不稳定，慎用）：... 1

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：... 2

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

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 地址-经纬转换类... 5

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

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

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

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

2.2.11. qq.maps.event 对象... 8

腾讯地图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用来放置地图显示。可指定长宽样式，则地图会按该大小显示.

<input type="button" value="Search" onclick="searchResult()"/>

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 >

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

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放大倍数最高

});

}

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

全部代码见:最简单的地图-显示一张以坐标为中心的地图.aspx

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

文本输入的智能提示。







构造函数

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

触发指定对象的指定事件

腾讯地图API简介、整理,布布扣,bubuko.com

时间： 2024-08-02 15:12:57

腾讯地图API简介、整理的相关文章

微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索.关键词输入提示.地址解析.逆地址解析.行政区划和距离计算等数据服务,让您的小程序更强大! 有时候我们在做微信小程序时有些功能需要获取当前的地理位置及附近地点的一些要求,但是

腾讯地图api 地址解析 js版

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <meta http-equiv="X-UA-Compatible" content=

【地图API】为何您的坐标不准？如何纠偏？

原文:[地图API]为何您的坐标不准?如何纠偏? 摘要:各种坐标体系之间如何转换?到底有哪些坐标体系?什么是火星坐标?为什么我的坐标,在地图上显示会有偏移?本文详细解答以上问题.最后给出坐标拾取工具. --------------------------------------------------------------------------------------------------------------------------- 一.坐标体系 首先我们要明白,开发者能接触到哪些坐

腾讯地图笔记

首先是js的引用 <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script> 腾讯地图js除了提供基本的功能库外,还提供了一些有用的附加库,下面这个是引用了坐标转换库的js引用 <script type="text/javascript" charset="utf-8" src=

百度地图API位置偏移的校准算法

转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过.第一次使用百度地图api获取位置并在地图上显示是在微信开发的时候,那是不知道具体原因无奈在微信获取的地理位置上加了一个偏移量进行校准,虽能勉强解决,但是不太准确.后来在安卓开始也同样遇到了这个问题,才发现百度地图API定位偏移已经不是一个偶然问题了. 百度地图API定位偏移的原因 以下来自互联网:

html5中高德、腾讯、百度 地图api调起手机app

html 部分 <div id="mapBg"> <div class="mapTab"> <a href="" class="mapBtn_g"><div>高德地图</div></a> <a href="" class="mapBtn_t"><div>腾讯地图</div><

百度地图开放API示例整理-基本地图和控件

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

几种常用的医院地图API接口地址—百度地图

几种常用的医院地图API接口地址,医疗网站上经常使用的来院路线地图,调用第三方平台提供的地图接口,下面是医疗模板库为大家收集整理的几种常用的地图API接口. 1.百度地图: 网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 2.搜狗地图: 网址:http://map.sogou.com/mark/?app=card 3.图吧: 网址:http://union.mapbar.com/onlineTagging.jsp 4.腾讯地图: 网址

网络免费API接口整理

从网上看到一些免费API接口,在个人开发小程序等应用练手时可试用. 各类无次数限制的免费API接口整理,主要是聚合数据上和API Store上的一些,还有一些其他的. 聚合数据提供30大类,160种以上基础数据API服务,国内最大的基础数据API服务,下面就罗列一些免费的各类API接口. 聚合的免费API接口数据: 手机号码归属地API接口:https://www.juhe.cn/docs/api/id/11 历史上的今天API接口:https://www.juhe.cn/docs/api/id