Map for each person's importance is self-evident, as the user's needs increase, you should also consider adding the map element in your project, the domestic first choice is definitely Baidu map. So it is necessary to know how to use Baidu Map-related APIs. This article shows you how to build a map environment and some considerations.
Build Baidu Map Environment 1. Register Baidu AccountFirst make sure you have a Baidu account. If you already have one, skip this step directly. No friends please go to https://www.baidu.com/register a bar.
2. Apply for Baidu DeveloperLogin the registered account to become a Baidu developer. Website: http://app.baidu.com/.
3. Application keyApplication URL: http://lbsyun.baidu.com/as shown:
If you are not clear about friends, please refer to http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html.
After creating the app, we'll see the key we need, as shown in:
This demo is mainly based on JavaScript-related APIs, the relevant reference document URL is as follows: Http://lbsyun.baidu.com/index.php?title=jspopular.
The relevant content is as follows:
Congratulations: So far, the preparation has been done!
Create helloworld.html Get Map dataAccording to the official API, there are two ways to achieve this. One is based on the map provided by the Baidu map interface directly within the page's head tag specified. The other is to dynamically load with JavaScript during page loading. As shown in the following:
Direct introduction of Baidu Map interface in head tagMany siege lions are believed to have introduced JavaScript in HTML, using similar methods. As shown in the following:
This approach is to dynamically load the Baidu map interface in JavaScript scripts. As shown in the following:
Here's an example of how to get the data about Baidu maps in just a few lines of code. Please refer to the comments section of the code, this section can help you better understand the API interface.
<! DOCTYPE html><html><head> <title></title> <script src="http://api.map.baidu.com/api?v=2.0&ak= DDD05FCBA9FEA5B83BF648515E04FC4C " type=" Text/javascript"></script></head><body> <!--the first way to load Baidu map 1. In the head tag introduced Baidu map JS use V1.4 and previous version of the citation: <script src= "http://a pi.map.baidu.com/api?v=1.4 "type=" Text/javascript "></script> using the V2.0 version of the reference method: <script src= "Http://api.map.baidu.com/api?v=2.0&ak= your Key" type= "Text/javascript" ></script> 2. The Create DOM container is used to display the map, and the example creates a Div 3 with the ID map. Get map data in JS and show <script type= "Text/javascript" > var map = new Bmap.map ("map"); Map.centerandzoom (New Bmap.point (121.491, 31.233), 11); </script> <div Align="center" Style="margin-top:50px;" > <H1>The first kind of loading Baidu map way</H1> <div id="Map1" style="width:900px;height:600px;" ></div> </div> <script type="Text/javascript"> var map = new bmap.map ("Map1"); Map.centerandzoom (new bmap.point (121.491, 31.233), one by one); </script> <!--the second way to introduce maps 1. When the page is loaded, get the JS of Baidu Map and set the callback function to execute after fetching is the callback parameter. Window.onload = Loadscript; That is, in the process of page loading will execute the Loadscript method, the method is to get Baidu map JS 2. Perform the callback function initialize method to display the map data. - <div Align="center" Style="margin-top:50px;" > <H1>The second kind of loading Baidu map way</H1> <div id="map" style="width:900px;height:600px;" ></div> </div> <script type="Text/javascript"> function initialize() { varMP =NewBmap.map (' map '); Mp.centerandzoom (NewBmap.point (121.491,31.233), One); } function loadscript() { varScript = Document.createelement ("Script"); SCRIPT.SRC ="Http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c&callback=initialize";//This is the v2.0 version of the reference method //http://api.map.baidu.com/api?v=1.4&ak= your key &callback=initialize ";//This is the v1.4 version and the previous version of the reference methodDocument.body.appendChild (script); } window.onload = Loadscript;</script> </html>
It is not difficult to see that you have access to map-related data!
This article is mainly to introduce the use of Baidu map interface related preparations and how to build helloworld.html to get Baidu map data and display. Other actions will be described in the next step.
Environment building of Baidu Map API
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
