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

時間 2019-12-02

標籤地圖 api 使用文檔騰訊爲例欄目騰訊简体版

原文原文鏈接

目錄javascript

騰訊地圖API 2html

1.API概覽... 2前端

1.1 WebService API（官網註明是beta版本，可能不穩定，慎用）：... 2java

1.2 URL API：... 2web

1.3 靜態圖API：... 2算法

1.3 JavaScript API V2：... 2數據庫

1.4 另外還有Android SDK, Android 定位SDK,和IOS SDK,主要用於手機端開發。 2c#

2. 下面重點講解JavaScript API V2：... 3後端

2.1最簡單的地圖-顯示一張以座標爲中心的地圖製做爲例：... 3api

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顯示（高德地圖智能本身寫代碼）。