地圖API使用文檔-以騰訊地圖為例

本文轉載自查看原文 2014-05-16 09:24 27573 Javascript/ JQuery/ HTML

騰訊地圖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()，實現經緯度=>地址的解析，俗稱逆解析。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 騰訊API展示地圖騰訊地圖api接收坐標提交坐標 H5 通過騰訊地圖api定點位置如何在app里利用js調取手機第三方地圖--以高德地圖和百度地圖為例（2） JAVA使用經緯度通過騰訊地圖API獲取詳細地址使用騰訊地圖api獲取定位信息經緯度(需要瀏覽器支持，且需要https) 如何在React中使用騰訊地圖？騰訊地圖選點組件使用示例高德地圖API使用如何使用google地圖的api（整理）