When writing a blog post, we may need to use a map to describe a thing or a place in detail. The easiest way is to find the target location on baidu/Google map, take a screenshot, and put it in the blog. However, if we can dynamically present Baidu/Google Map API data to readers, this not only makes the blog more lively and interesting, but also improves interaction with readers. I am still open-minded. The following describes how to reference Baidu Map API data on the wordpess website.
First, let's look at the final effect, as shown in the following figure:
Method 1: m Baidu Maps
Download plug-ins
1. Search, install, and activate WordPress in the background
2. Download the plug-in package from the Wordpress official website and upload it to/wp-content/plugins for decompression.
Create Page
Add code: [bmap width = "500" height = "400" lat = "39.900" lng = "116.403" zoom = "12"]
Meanings of parameters:
Width: the width (in pixels) of the map to be displayed on the page)
Height: the height of the map to be displayed on the page (unit: pixels)
Lat: latitude of the map center
Lng: longitude of the map center
Zoom: Map zoom-in level (level range: 1-19). The larger the value, the more accurate it is.
Finally, save the page to preview the effect.
Example
This feature makes it possible for major recruitment websites to map the specific geographic locations of post companies to facilitate job seekers. Let's take Baidu headquarters for example. First, how should we locate it? This can be achieved through the "pick up coordinate system" of Baidu Map.
Access: http://api.map.baidu.com/lbsapi/getpoint/index.html
Enter the specific address in the input box: Baidu Tower
Determine coordinates, place the cursor on a single machine, get coordinate points in the upper right corner, and copy the coordinates.
Modify the corresponding parameter: [bmap width = "500" height = "400" lat = "39.900" lng = "116.403" zoom = "12"]
Method 2: use Baidu's "map quick builder"
Access URL
Http://api.map.baidu.com/lbsapi/creatmap/index.html
Set related parameters
1. Locate the center point
2. Set map
3. Add annotation
1. Click "Get Code"
2. Click "Copy code"
3. Create a page in wordpress or create an html blank document in the website space, and copy the code to it.
For more information, visit: http://developer.baidu.com/map