Recently the customer asked a demand, to add Baidu map in the site display, in fact, the original is Google Maps, but because Google in the mainland was banned, had to give users a choice to add.
I will share with you some of the knowledge I have recently compiled.
How to use Baidu Map API:
1. To refer to the API Library link first:
Eg:<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= Your Keys" ></script>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.4" ></script>
The Baidu map JavaScript API is a set of application interfaces written in JavaScript to help you build rich, interactive map applications on your website that support PC and mobile
Browser-based map application development with support for HTML5 feature map development.
The set of APIs is free to open. From the v1.5 version, you need to apply for the key (AK) before use, the interface (in addition to sending SMS functions) no use limit.
Open this link:http://developer.baidu.com/map/index.php?title=jspopular
There are a lot of demo, you can see for yourself first.
2, Baidu provides the demo as an example, a brief introduction:
1<! DOCTYPE html>234<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/>5<meta name="Viewport"Content="initial-scale=1.0, User-scalable=no"/>6<style type="Text/css">7Body, HTML, #allmap {width: -%;height: -%;overflow:hidden;margin:0; Font-family:"Microsoft Ya-Black";} 8</style>9<script type="Text/javascript"Src="http://api.map.baidu.com/api?v=1.4">Ten</script> One<title> Map Show </title> A -<body> -<div id="Allmap"style="width:800px;height:600px"></div> the</body> - -<script type="Text/javascript"> - //Baidu Map API features + varMap =NewBmap.map ("Allmap");//Create a Map instance - varPoint =NewBmap.point (116.404,39.915);//initialize map, set center point coordinates and map level +Map.centerandzoom (Point, the); AMap.addcontrol (NewBmap.maptypecontrol ());//Add a Map type control atMap.setcurrentcity ("Beijing");//set the city that the map displays this item is required to be set -Map.enablescrollwheelzoom (true);//Turn on mouse wheel zoom - //Create a callout - function Addmarker (point) { - varMarker =NewBmap.marker (point); - Map.addoverlay (marker); in } - Addmarker (point); to</script>
Copy the above code, save it as an. html file, and run it, and it will appear as a page like Baidu maps.
The effect is as follows:
First of all, these are relatively simple, some introductory knowledge, and so on later contact more words, and then continue to share with you.
C # call Baidu Map API experience Sharing (a)
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
