腾讯地图Javascript API GL
1. 介紹
騰訊位置服務在多平臺為開發者提供了豐富的地圖展現形式，幫助從屬于不同領域的開發人員輕松完成構建地圖并在其基礎上打造專屬內容的工作。同時配合海量數據、個性化定制、可視化等能力滿足各個行業場景下對地圖的需求。
Javascript API GL是基于WebGL技術打造的3D版地圖API，3D化的視野更為自由，交互更加流暢。
提供豐富的功能接口，包括點、線、面繪制，自定義圖層、個性化樣式及繪圖、測距工具等，使開發者更加容易的實現產品構思。
充分發揮GPU的并行計算能力，同時結合WebWorker多線程技術，大幅度提升了大數據量的渲染性能。最高支持百萬級點、線、面繪制，同時可以保持高幀率運行。
2. 從Hello World開始
首先注冊騰訊位置服務平臺賬號，完成個人認證后，新建應用申請應用Key，
里邊默認啟用產品足夠我們使用了，如果需要額外的服務勾選即可
進入JavaScript API，查看開發指南
選擇基礎入門
將官方提供的Hello World示例復制到我們的代碼中，注意將應用Key替換成自己申請的Key
<!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=******替換成你申請的Key******"></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>以本地服務的方式去啟動，不要以磁盤路徑去訪問
3. 個性化地圖
地圖平臺大多默認采用經典白色風格，有時我們需要地圖樣式和企業系統風格保持一致，或者做一些個性化的展示。在這方面騰訊地圖為開發者提供了可擴展的地圖風格，包括一些官方樣式模板，如果不滿足我們的需求，還可以進行自定義樣式。
選擇(? ω ?)的樣式，點擊直接使用，將樣式和使用的應用Key進行綁定
在代碼中設置使用樣式
//定義map變量，調用 TMap.Map() 構造函數創建地圖var map = new TMap.Map(document.getElementById('container'), {center: center,//設置地圖中心點坐標zoom: 17.2, //設置地圖縮放級別pitch: 43.5, //設置俯仰角rotation: 45, //設置地圖旋轉角度mapStyleId: 'style1' //設置樣式ID style1、style2...});官方提供的樣式（其中一個）運行結果如下：
4. 自定義樣式
首先在開發者平臺創建自己的自定義樣式，將自定義樣式和應用Key關聯后使用自定義樣式
在應用中綁定自己設置的自定義樣式
在代碼中更改mapStyleId為對于的自定義樣式id
運行結果：
總結
以上是生活随笔為你收集整理的腾讯地图Javascript API GL的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php开发的教学管理系统,php教学管理
- 下一篇： java美元兑换,（Java实现） 美元