1. 使用步驟

1.登錄騰訊位置服務控制臺,如果沒有注冊過賬號,請點擊注冊按鈕注冊成為騰訊位置服務開發者

2.創建應用和Key:

進入控制臺后,展開應用管理菜單并選擇我的應用

點擊右側創建應用,如果已經創建過應用,可以直接選擇添加Key

Javascript API GL并不需要勾選任何產品,直接創建Key就可以使用(在引入API庫時需要將key做為參數傳入)

2. 使用演示

下面為您演示利用Javascript API GL實現地圖顯示,使您對它有一個整體的認識,而具體的細節將在hello world之后為您詳細闡述。

代碼展示了顯示地圖的一般步驟:
1.在body中預先準備地圖容器,并在CSS樣式中定義地圖(容器)顯示大小
2.引入API庫
3.創建并顯示地圖的代碼(本例中,通過頁面onload事件觸發運行init函數實現地圖顯示)
而在實際的項目中,可以根據需求,實現動態創建地圖容器、異步加載地圖API、動態設置地圖中心點等任意操作。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello world!</title>
<style type="text/css">
#container{
/*地圖(容器)顯示大小*/
width:1200px;
height:400px;
}
</style>
<!--引入Javascript API GL,參數說明參見下文-->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
//地圖初始化函數,本例取名為init,開發者可根據實際情況定義
function initMap() {
//定義地圖中心點坐標
var center = new TMap.LatLng(39.984120, 116.307484)
//定義map變量,調用 TMap.Map() 構造函數創建地圖
var map = new TMap.Map(document.getElementById('container'), {
center: center,//設置地圖中心點坐標
zoom: 17.2, //設置地圖縮放級別
pitch: 43.5, //設置俯仰角
rotation: 45 //設置地圖旋轉角度
});
}
</script>
</head>
<!-- 頁面載入后,調用init函數 -->
<body onload="initMap()">
<!-- 定義地圖顯示容器 -->
<div id="container"></div>
</body>
</html>
加載Javascript API GL

下面為您演示利用Javascript API GL實現地圖顯示,使您對它有一個整體的認識,而具體的細節將在hello world之后為您詳細闡述。

通過引入script標簽加載API服務,格式如下:

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

其中:https://map.qq.com/api/gljs 為API庫地址,其參數包括:
key:您的開發key,可在 控制臺 -> 應用管理 -> 我的應用 界面進行創建得到
v :代表引用的版本號,目前僅支持1.exp,代表Javascript API GL v1最新版,我們會保證1.x大版本的接口兼容,讓您獲得最新最快的支持。
libraries:用來指明加載的附加庫,可以指定多個附加庫名稱,名稱之間用英文半角字符逗號”,”分隔,目前支持:
       visualization:可視化組件庫,將位置數據轉化為可視圖像的工具,比如熱力圖、散點圖等。
       tools:應用工具,包含一系列點、線、面繪制與編輯的交互工具,以及距離測量工具;
       geometry:幾何計算庫,進行距離、夾角、面積的計算,判斷點、線、面之間的關系等;
       model:模型庫,可支持GLTF模型加載至地圖中;
       view:地圖視角附加庫,附加庫提供以觀察者視角操作地圖的能力;
       service:服務類附加庫,是基于騰訊地圖開放平臺 WebService API封裝的接口能力;        
其它附加庫我們會在后續版本中陸續提供,敬請期待。
callback:指定異步加載API后的回調函數,見下文詳述(直接引入API時請勿加此參數)

異步加載API
通過動態創建script標簽,并指定callback參數,在API加載后會自動調用callback指定回調函數,實現異步加載(按需加載)

function initMap() {
//定義地圖中心點坐標
var center=new TMap.LatLng(39.984120,116.307484)
//定義map變量,調用 TMap.Map() 構造函數創建地圖
var map = new TMap.Map(document.getElementById('container'), {
center: center,//設置地圖中心點坐標
zoom:17.2, //設置地圖縮放級別
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=initMap";
document.body.appendChild(script);
}

window.onload = loadScript;

不再支持file://方式使用Javascript API GL:
本API需要在有Web服務的情況下才能正常使用,Windows環境可以使用IIS或其它Web服務器軟件,Linux可用apache/nginx等,配置完成后通過localhost進行調試使用(發布上線,用域名/ip訪問不存在這個問題):

3. 使用地圖組件庫

如果您的項目使用了Vue或者React框架,建議使用tlbs-map地圖組件庫開發地圖業務,它支持Vue和React框架,能夠降低您的開發成本。

4. 其它說明

坐標系:
騰訊位置服務API使用的坐標體系,為國測局規定的GCJ-02坐標系,是國內的標準坐標體系,經過國家測繪局加密處理,符合國家測繪局對地理信息保密要求。如果原始數據是使用的GPS坐標或其它地圖坐標系,則需要進行坐標轉換,否則顯示位置將會和實際位置有偏差。

坐標格式:
JavaScript API GL使用的坐標格式是{緯度, 經度},即緯度在前,經度在后,如果在使用API過程中,發現地圖無法顯示,請先查看坐標格式是否正確。從其它幾家API切換過來的用戶尤其要注意這個區別。

5. 常見問題

Q:如何找到騰訊地圖API

A:冪簡集成是國內領先的API集成管理平臺,專注于為開發者提供全面、高效、易用的API集成解決方案。冪簡API平臺可以通過以下兩種方式找到所需API:通過關鍵詞搜索API(例如,輸入’騰訊地圖API‘這類品類詞,更容易找到結果)、或者從API hub分類頁進入尋找。

Q:高速路牌怎么隱藏?

A:可以設置baseMap,features設為[‘base’, ‘building3d’, ‘point’]。

Q:實例創建后內存飆升,切換路由時可否銷毀騰訊地圖的實例?

A:切換路由的時候可能創建了多個實例,可以使用destroy銷毀地圖,也可以使用單例模式解決。

Q:JavaScript API GL的marker添加多個標記后,如何顯示和隱藏某一個標記或者多個標記?

A:目前沒有提供這樣的接口控制顯示隱藏,可以考慮使用add和remove接口。

Q:暫停小車移動了之后,再次啟動小車,小車從暫停的點繼續移動或從起點開始移動的方式是什么?

A:resumeMove是從暫停點,moveAlong是重新開始。

Q:騰訊地圖API的替代品有哪些?

提供語音翻譯 API的服務商除騰訊地圖API,還有其他替代服務商也提供類似api服務,例如:

高德地圖

汽車地圖-tomtom

谷歌地圖API

更多競品可以在冪簡集成開放平臺中找到。

Q:騰訊地圖API這個平臺還適用于哪些api?

導航服務

路線規劃

地點搜索

6.  總結

通過本文的分步指南,我們詳細介紹了如何獲取騰訊地圖API密鑰的全過程。這包括從了解申請流程到完成申請并獲取密鑰的各個關鍵步驟。閱讀之后,您可以順利申請到騰訊地圖API密鑰,獲取實時、準確的地圖數據,并將其整合到您的應用程序或服務中。

上一篇:

如何獲取訊飛星火 API Key 密鑰(分步指南)

下一篇:

如何獲取ChatGLM API Key 密鑰(分步指南)
#你可能也喜歡這些API文章!

我們有何不同?

API服務商零注冊

多API并行試用

數據驅動選型,提升決策效率

查看全部API→
??

熱門場景實測,選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費