<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>simple map</title>
<style type= "Text/css" >
Body, HTML {
width:100%;
height:100%;
margin:0;
Font-family: "Microsoft Jas Black";
}
p {
margin-left:5px;
font-size:14px;
}
</style>
<script type= "Text/javascript"
src= "http://api.map.baidu.com/api?ak=Cd9lWxLeoI2llbsD9ELPdvd0" ></ Script>
<body>
<div id= "content" class= "content";
<input type= "text" value= "id=" keyword "/> <input type=" button "
name=" "id=" "value=" Query "onclick=" search () "/>
<div Style= "width:600px; height:500px; border:0px solid Gray "
id=" container "></DIV>
<p id=" AA "></P>
<script type=" text/ JavaScript "
//Create map instance
var map = new Bmap.map (" container ");
Create point coordinates
var dot = new Bmap.point (106.73, 31.86);
Initialize the map, set the center store coordinates and map level
Map.centerandzoom (point, one);
Turn on the mouse wheel zoom function
Map.enablescrollwheelzoom ();
//Add thumbnail control
Map.addcontrol (new Bmap.overviewmapcontrol ({
Isopen:true,
//control's docking position
Anchor:bmap_anchor _bottom_right
}));
//Add zoom translation Control
Map.addcontrol (New Bmap.navigationcontrol ());
Add a scale bar control
Map.addcontrol (New Bmap.scalecontrol ());
Add a map type control
Map.addcontrol (New Bmap.maptypecontrol ());
Create Callout
var marker = new Bmap.marker (point);
Add annotations to the map
Map.addoverlay (marker);
Pop-up Information window
var content = "<table>";
Content = content + "<tr><td> number:001</td></tr>";
Content = content + "<tr><td> location: Bazhong </td></tr>";
Content = content + "<tr><td> time:2015-10-25</td></tr>";
Content + = "</table>";
var Infowindow = new Bmap.infowindow (content);
Marker.addeventlistener ("click", Function () {
This.openinfowindow (Infowindow);
});
Click on the map to get latitude and longitude coordinates
Map.addeventlistener ("click", Function (e) {
document.getElementById ("AA"). InnerHTML = "Longitude coordinates:" + e.point.lng
+ " latitude coordinates:" + E.point.lat;
});
Keyword search
function Search () {
var keyword = document.getElementById ("keyword"). value;
if (keyword) {
var local = new Bmap.localsearch (map, {
Renderoptions: {
Map:map
}
});
Local.search (keyword);
}else{
Alert ("Please enter the place name you are looking for");
}
}
</script>
</div>
</body>
Baidu Map API App
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
