Home >Web Front-end >JS Tutorial >The latest Amap API WEB development example tutorial

The latest Amap API WEB development example tutorial

零下一度Original: 2018-05-28 17:32:0313431browse

Front-end time because the company needs to study Baidu’s tutorials

Then write a simple note to record what you have learned, just to satisfy your temporary writing enthusiasm

AMAP WEB development (key application, api) simple tutorial

1. First we need to go to the "Amap Development Platform"

Through "Baidu search" or "Google search" Amap, there will be an Amap development platform | Amap apl

##2. Log in to the AutoNavi Development Platform

This is the official website of the AutoNavi Development Platform, and then click to log in. Just do not register.

3. Enter the console to create a new application

After entering the console, select "Application Management" and click to create a new application. Be sure to remember this step

The name and type of the application should be selected according to your actual situation

Create After that, there will be a new application, and then click to add key

#Fill in the key name here and select the service platform. If you are on the mobile phone, it will be the corresponding andriod /ios, and because I am working on the web side, I chose the "web side"

The services that can be used by each service platform are different, pay attention to it

Then click Submit There is a key

4. The use of key and the use of api

After getting the key, how to use it? As for the German map, of course you have to look at its API

You can see it through the development document web-side JavaScript API under "Development and Support" on the homepage

The picture above is the api page. This is relatively comprehensive. If you are not familiar with it or don’t know how to call it, let’s take a look directly. His example directly uses code to show how to call

The JS API example center in the "Development and Support" examples and experience of the menu

Here it is It is very clear. Of course, this is only a partial demonstration. Many classes and methods are not written out. You can go to the API to view the details yourself. However, here is an introduction to the basic use of maps and the calling of various functions

5. Use of Gaode map API

Here is a brief introduction to the method of use

1. Gaode map js and css The key required in the fourth line of the call is the key obtained by adding the application just above

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. Amap js instantiation to start the map

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

3. Complete basic map display (code Sourced from Gaode Map 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. Keyword search

 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. Driving route planning (based on starting point and end point)

 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. Real-time traffic conditions

 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 floor

 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. Satellite image

 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>

There are many more functions, so I won’t describe them one by one here. You can go to the Amap development platform to view

The above is the detailed content of The latest Amap API WEB development example tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How does js determine that a string is in JSON format?Next article：How does js determine that a string is in JSON format?

See more

The latest Amap API WEB development example tutorial

Related articles