本文目錄
- 一、介紹
- 二、開始使用
- （一） 注冊成為騰訊位置服務開發者
- （二）創建應用和Key
- 三、地圖顯示
- （一）在地圖頁面引入 JS 庫
- （二）定義顯示地圖的容器
- （三）初始化并顯示地圖
- 四、效果圖
- 五、其它
一、介紹
Javascript API GL是基于WebGL技術打造的3D版地圖API，3D化的視野更為自由，互動更加流暢，
提供豐富的功能介面，包括點、線、面繪制，自定義圖層、個性化樣式及繪圖、測距工具等，使開發者更加容易的實作產品構思，
充分發揮GPU的并行計算能力，同時結合WebWorker多執行緒技術，大幅度提升了大資料量的渲染性能，最高支持百萬級點、線、面繪制，同時可以保持高幀率運行，
（圖片來自騰訊位置服務）
二、開始使用
（一） 注冊成為騰訊位置服務開發者
點擊前往騰訊位置服務官網 >>>
（二）創建應用和Key
-
進入控制臺后，展開應用管理選單并選擇【我的應用】，
-
點擊右側【創建應用】，如果已經創建過應用，可以直接選擇【添加Key】，
-
Javascript API GL并不需要勾選任何產品，直接創建 Key 就可以使用（在引入 API 庫時需要將 key 做為引數傳入），
三、地圖顯示
在地圖顯示時，實際需求是以用戶所在位置為中心點顯示地圖，在 H5 端，我們可以使用騰訊位置服務的前端定位組件來實作對用戶的定位，定位時，會詢問用戶是否給予定位權限，
（一）在地圖頁面引入 JS 庫
- 引入
Javascript API GL
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=這里是你的Key"></script>
- 引入前端定位組件
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=這里是你的Key&referer=你的應用名稱"></script>
（二）定義顯示地圖的容器
<div id="mapContainer"></div>
（三）初始化并顯示地圖
<script type="text/javascript">
// 頁面加載完成，先定位當前用戶位置
window.onload = function () {
var geolocation = new qq.maps.Geolocation();
geolocation.getLocation(showPosition, showErr);
}
// 若定位成功，執行此方法
function showPosition(position) {
// 帶著獲取到的經緯度引數，初始化地圖顯示
showMyMap(position.lat, position.lng);
};
// 若定位失敗，執行此方法
function showErr(e) {
alert('定位失敗-' + e);
};
// 初始化地圖的方法，需要傳入經度和緯度作為地圖的中心點
function showMyMap(lat, lng) {
// 實體化地圖
var map = new TMap.Map('mapContainer', {
center: new TMap.LatLng(lat, lng),
zoom: 18,
viewMode: '3D'
});
}
</script>
zoom 引數是地圖縮放級別，值越大，縮放越大，即看到的視野變小，反之看到的建筑物越多，
viewMode 是顯示模式，即以 2D 還是 3D 顯示地圖，默認 3D ，地圖可旋轉、傾斜；2D 則固定上北下南，不可旋轉和傾斜，
四、效果圖
掃碼體驗
五、其它
騰訊位置服務官網 >>>
前端定位組件介紹 >>>
騰訊位置服務 JavaScript API GL 檔案 >>>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335177.html
標籤：其他