本文僅為騰訊地圖 API 調用入門,如需進階學習,請在騰訊位置服務網站上進行學習。
登陸網址 https://lbs.qq.com/
點擊右上角的登陸按鈕,需要進行注冊按照流程進行就好。
完成之后,選擇右上角的控制台,進行開發者驗證。
完成后在左邊欄的key管理中選擇創建新密鑰。
在本地新建 txt 文檔,將如下代碼輸入到文檔中,將自己的 key 在文檔中的相應位置處進行替換。(24行)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>個性化地圖</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 7 <style type="text/css"> 8 html,body{ 9 width:100%; 10 height:100%; 11 } 12 *{ 13 margin:0px; 14 padding:0px; 15 } 16 body { 17 font: 12px/16px Verdana, Helvetica, Arial, sans-serif; 18 } 19 #container{ 20 min-width:600px; 21 min-height:767px; 22 } 23 </style> 24 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX"></script> // 用自己的key替換XXXXX 25 <script> 26 window.onload = function () { 27 function init() { 28 // 創建地圖 29 var map = new qq.maps.Map(document.getElementById("container"), { 30 center: new qq.maps.LatLng(39.916527, 116.397128), // 地圖的中心地理坐標 31 zoom: 8, // 地圖縮放級別 32 mapStyleId: 'style1' // 該key綁定的style1對應於經典地圖樣式,若未綁定將彈出無權限提示窗 33 }); 34 } 35 //調用初始化函數 36 init(); 37 } 38 </script> 39 </head> 40 <body> 41 <!-- 定義地圖顯示容器 --> 42 <div id="container"></div> 43 </body> 44 </html>
將 txt 文檔后綴換成 html,雙擊運行即可。