最新的高德地圖API WEB開發實例教程-js教程-PHP中文網

首頁

web前端

js教程

最新的高德地圖API WEB開發實例教程

零下一度

May 28, 2018 pm 05:32 PM

apiweb

前端時間因為公司需要研究了一下百度的教程

然後寫個簡約的筆記記錄一下自己學習的收穫，只為了滿足自己暫時的寫作熱情

高德地圖WEB開發（key申請、api）簡約教學

#1.首先我們需要去「高德地圖開發平台」

透過「百度搜尋」或「Google搜尋」高德地圖接著會有一個高德開發平台|高德地圖apl

#2.登入高德開發平台

這是高德開發平台的官網，然後點選登錄，沒有註冊就好

3.進入控制台建立新應用程式

進入控制台之後選擇「應用程式管理」然後點擊建立新應用，一定要記得這一步喲

應用程式的名稱和類型更具自己的實際情況選擇

創建好之後就會有一個新的應用了，然後點擊添加key

在這裡填寫好key名稱之後選擇服務平台，如果你是手機端就算對應的andriod /ios，然後因為我是做的web端所以選擇的是「web端」

每個服務平台可以使用的服務是不一樣的，注意看喲

然後點擊提交就有了一個key了

4.key的使用以及api的使用

#得到了key，那麼怎麼使用高德地圖呢，當然是看他的api了

透過首頁的「開發與支援」下的開發文檔web端JavaScript api就能看到

上圖就是api的頁面了，這個還是比較全面的，如果你不熟悉感覺還是不知道怎麼呼叫我們直接看他的實例，直接用程式碼展示如何呼叫

在選單的「開發與支援」範例與體驗中的JS API 範例中心

這裡就十分的明了，當然這裡只是部分演示，很多類別以及方法都是沒有寫出來的，可以去api自己查看詳細，但是這裡介紹了基本的地圖使用以及各種功能的調用

#5.高的地圖API的使用

這裡簡單的介紹一下使用的方法

1.高德地圖js以及css的呼叫其中第四行需要的key是剛才上面添加應用得到的key

1   <title>基本地图展示</title>
2     <link rel="stylesheet" href=" 
3     <script src=" 
4     <script src=" 
5     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>

2.高德地圖js實例化啟動地圖

1     var map = new AMap.Map(&#39;container&#39;, {
2         resizeEnable: true,
3         zoom:11,
4         center: [116.397428, 39.90923]
5     });

3.完整的基礎地圖展示（程式碼源自高德地圖AI）

 1 <!doctype html> 
 2 <html> 
 3 <head> 
 4     <meta charset="utf-8"> 
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 
 7     <title>基本地图展示</title> 
 8     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css?1.1.11"/> 
 9     <script src="http://cache.amap.com/lbs/static/es5.min.js?1.1.11"></script>
 10     <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
 11     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
 12 </head>
 13 <body>
 14 <p id="container"></p>
 15 
 16 <script>
 17     var map = new AMap.Map(&#39;container&#39;, {
 18         resizeEnable: true,
 19         zoom:11,
 20         center: [116.397428, 39.90923]
 21     });
 22 
 23 </script>
 24 </body>
 25 </html>

4.關鍵字搜尋

 1 <!doctype html> 
 2 <html> 
 3 <head> 
 4     <meta charset="utf-8"> 
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 
 7     <title>关键字检索</title> 
 8     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css?1.1.11"/> 
 9     <style type="text/css">
 10         #panel {
 11             position: absolute;
 12             background-color: white;
 13             max-height: 90%;
 14             overflow-y: auto;
 15             top: 10px;
 16             right: 10px;
 17             width: 280px;
 18         }
 19     </style>
 20     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
 21     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
 22 </head>
 23 <body>
 24 <p id="container"></p>
 25 <p id="panel"></p>
 26 <script type="text/javascript">
 27     var map = new AMap.Map("container", {
 28         resizeEnable: true
 29     });
 30     AMap.service(["AMap.PlaceSearch"], function() {
 31         var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
 32             pageSize: 5,
 33             pageIndex: 1,
 34             city: "010", //城市
 35             map: map,
 36             panel: "panel"
 37         });
 38         //关键字查询
 39         placeSearch.search(&#39;北京大学&#39;);
 40     });
 41 </script>
 42 </body>43 </html>

5.駕駛路線規劃（依起點終點）

 1 <!doctype html> 
 2 <html> 
 3 <head> 
 4     <meta charset="utf-8"> 
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 
 7     <title>按起终点经纬度规划路线</title> 
 8     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css?1.1.11"/> 
 9     <style type="text/css">
 10         #panel {
 11             position: fixed;
 12             background-color: white;
 13             max-height: 90%;
 14             overflow-y: auto;
 15             top: 10px;
 16             right: 10px;
 17             width: 280px;
 18         }
 19     </style>
 20     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.Driving"></script>
 21     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
 22 </head>
 23 <body>
 24 <p id="container"></p>
 25 <p id="panel"></p>
 26 <script type="text/javascript">
 27     //基本地图加载
 28     var map = new AMap.Map("container", {
 29         resizeEnable: true,
 30         center: [116.397428, 39.90923],//地图中心点
 31         zoom: 13 //地图显示的缩放级别
 32     });
 33     //构造路线导航类
 34     var driving = new AMap.Driving({
 35         map: map,
 36         panel: "panel"
 37     }); 
 38     // 根据起终点经纬度规划驾车导航路线
 39     driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));
 40 </script>
 41 </body>
 42 </html>

6.即時路況

 1 <body> 
 2 <p id="container"></p> 
 3 <p class="button-group"> 
 4     <input type="button" class="button" id="control" value="显示/隐藏实时路况"/> 
 5 </p> 
 6 <script> 
 7     var map = new AMap.Map(&#39;container&#39;, { 
 8         resizeEnable: true, 
 9         center: [116.397428, 39.90923],
 10         zoom: 13
 11     });
 12     //实时路况图层
 13     var trafficLayer = new AMap.TileLayer.Traffic({
 14         zIndex: 10
 15     });
 16     trafficLayer.setMap(map);
 17     
 18     var isVisible = true;
 19     AMap.event.addDomListener(document.getElementById(&#39;control&#39;), &#39;click&#39;, function() {
 20         if (isVisible) {
 21             trafficLayer.hide();
 22             isVisible = false;
 23         } else {
 24             trafficLayer.show();
 25             isVisible = true;
 26         }
 27     }, false);
 28 </script>
 29 </body>

7.3d樓層

 1 <body> 
 2 <p id="container"></p> 
 3 <p id="tip"></p> 
 4 <script> 
 5     var map = new AMap.Map("container", { 
 6         resizeEnable: true, 
 7         center: [121.498586, 31.239637], 
 8         zoom: 17 
 9     });
 10     if (document.createElement(&#39;canvas&#39;) && document.createElement(&#39;canvas&#39;).getContext && document.createElement(&#39;canvas&#39;).getContext(&#39;2d&#39;)) {
 11         // 实例化3D楼块图层
 12         var buildings = new AMap.Buildings();
 13         // 在map中添加3D楼块图层
 14         buildings.setMap(map);
 15     } else {
 16         document.getElementById(&#39;tip&#39;).innerHTML = "对不起，运行该示例需要浏览器支持HTML5！";
 17     }
 18 </script>
 19 </body>

8.衛星圖

 1 <!doctype html> 
 2 <html> 
 3 <head> 
 4     <meta charset="utf-8"> 
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 
 7     <title>卫星图</title> 
 8     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css?1.1.11"/> 
 9     <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
 10     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
 11 </head>
 12 <body>
 13 <p id="container"></p>
 14 <script>
 15     var map = new AMap.Map(&#39;container&#39;, {
 16         center: [116.397428, 39.90923],
 17         layers: [new AMap.TileLayer.Satellite()],
 18         zoom: 13
 19     });
 20 </script>
 21 </body>
 22 </html>

功能還有很多，這裡就不一一敘述了，大家可以去高德地圖開發平台查看### ### ###

以上是最新的高德地圖API WEB開發實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。