The latest Amap API WEB development example tutorial-JS Tutorial-php.cn

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 基本地图展示 2

Copy after login

2. Amap js instantiation to start the map

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

Copy after login

3. Complete basic map display (code Sourced from Gaode Map AI)

1 2 3 4 5 6 7 基本地图展示 8 9 10 11 12

13 14

15 16 24 25

Copy after login

4. Keyword search

1 2 3 4 5 6 7 关键字检索 8 9 20 21 22

23 24

26 42 43

Copy after login

5. Driving route planning (based on starting point and end point)

1 2 3 4 5 6 7 按起终点经纬度规划路线 8 9 20 21 22

23 24

26 41 42

Copy after login

6. Real-time traffic conditions

1 2

4 5

6 29

Copy after login

7.3d floor

1 2

4 19

Copy after login

8. Satellite image

1 2 3 4 5 6 7 卫星图 8 9 10 11

12 13

14 21 22

Copy after login

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!