Two methods for WordPress to use Baidu Map API data

Source: Internet
Author: User
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

Get Code

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.