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