,该div用来放置地图显示。可指定长宽样式，则地图会按该大小显示.

Step2:在网页

处引入Tencent Map Js:

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

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

Step3:写地图js代码，并设置

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

        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简介、整理,搜素材,soscw.com

腾讯地图API简介、整理

标签：android   style   c   code   java   tar   

原文地址：http://www.cnblogs.com/nlh774/p/3731466.html