This article mainly introduces: Detailed steps for embedding Baidu maps in web pages and using Baidu Maps API to customize maps
1. First, find Baidu Map and open the map open platform, as shown in Figure 1 below
Figure 1 Baidu Map-->Map Open Platform
2. Select [Develop] in the navigation bar and select the corresponding navigation submenu. This article uses web development as an example, so the [ JavaScript API ] for web development is selected.
Figure 2 Select JavaScript API
3. If you are using it for the first time, you must first obtain a key. This key is free.
Figure 3 Obtaining the key
4. Click to get the key and you can create the application, as shown in Figure 4 below
Figure 4 Creating an application
5. Create an application, fill in the corresponding content, and click Submit to obtain a free key.
Figure 5 Fill in the content and get the free key
6. Once you have a key, you can start using your key to connect maps. Return to the page where you just applied for the key. You can click on any of the following functional maps to enter the map editing page.
Figure 6 Baidu Map developer options
7. Enter the editing page as shown in Figure 7
- The left menu navigation bar has a variety of function options. In this example, the map example is selected --> Map display
- The middle column is the editing code
- The right column is the map display effect
You can select the function menu on the left according to the needs of the project and copy the corresponding code. The code needs to be written in the red box in Figure 7 below. Modify it according to the needs of the project.
Figure 7 Map editing page
8. For another example, when loading a map asynchronously, the places that need to be modified are also the places corresponding to the red boxes.
Figure 8 Asynchronous map loading
9. This example uses a combination of map display and asynchronous map loading. The code reference is as shown in Figure 9
Figure 9 Adding a map
10. Final renderings
Figure 10 Final renderings