<! DOCTYPE html>
<meta charset= "UTF-8" >
<script src= "Http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" ></script>
<!--call Baidu map api-->
<script type= "Text/javascript" src= "Http://api.map.baidu.com/api?key=&v=1.1&services=true" >
</script>
<title></title>
<style>
/* Service Outlets */
#wrap {
width:1196px;
height:540;
Margin:auto;
Overflow:hidden;
}
#wrap Div. _left {
width:281px;
Float:left;
height:339px;
border-right:1px solid #CCCCCC;
}
#wrap ul {
width:1196px;
height:50px;
border-bottom:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
margin-bottom:57px;
}
/* Search Box City */
#input {
width:360px;
height:37px;
margin-left:51px;
}
</style>
<body>
<!--service outlets and help Center-
<div id= "Wrap" >
<ul></ul>
<!--service Outlets--
<!--Baidu Map container--
<div style= "WIDTH:563PX; height:435px; Float:left; margin-bottom:142px; "id=" Ditucontent "></div>
<div style= "Float:left;" >
<input type= "text" id= "input"/>
<input type= "button" onclick= "Searchmap ();" value= "Search map" style= "width:160px; height:39px; "/>
</div>
<!--Baidu Map container End--
</div>
</body>
<script type= "Text/javascript" >
To create and initialize a map function:
function Initmap () {
Createmap (114.025974, 22.546054); Create a map
Setmapevent (); Set Map Events
Addmapcontrol (); Adding controls to a map
}
Map Search
function Searchmap () {
var area = document.getElementById ("input"). Value; Get Regional
var ls = new Bmap.localsearch (map);
Ls.setsearchcompletecallback (function (RS) {
if (ls.getstatus () = = bmap_status_success) {
var poi = rs.getpoi (0);
if (POI) {
Createmap (POI.POINT.LNG, Poi.point.lat); Create a map (longitude poi.point.lng, latitude Poi.point.lat)
Setmapevent (); Set Map Events
Addmapcontrol (); Adding controls to a map
}
}
});
Ls.search (area);
}
To create a map function:
function Createmap (x, y) {
var map = new Bmap.map ("Ditucontent"); Create a map in the Baidu map container
var point = new Bmap.point (x, y); Define a center point coordinate
Map.centerandzoom (Point, 12); Set the center point and coordinates of the map and display the map in the map container
Window.map = map; Store the map variable in the global
}
Map Event Settings function:
function Setmapevent () {
Map.enabledragging (); Enable map drag events, enabled by default (can not be written)
Map.enablescrollwheelzoom (); Enable map wheel zoom in and zoom out
Map.enabledoubleclickzoom (); Enable mouse double-click to enlarge, enabled by default (can not write)
Map.enablekeyboard (); Enable keyboard to move the map up or down
}
Add a function to the map control:
function Addmapcontrol () {
Add a zoom control to a map
var ctrl_nav = new Bmap.navigationcontrol ({
Anchor:bmap_anchor_top_left,
Type:bmap_navigation_control_large
});
Map.addcontrol (Ctrl_nav);
Add a thumbnail control to your map
var ctrl_ove = new Bmap.overviewmapcontrol ({
Anchor:bmap_anchor_bottom_right,
Isopen:1
});
Map.addcontrol (Ctrl_ove);
Add a scale bar control to a map
var Ctrl_sca = new Bmap.scalecontrol ({
Anchor:bmap_anchor_bottom_left
});
Map.addcontrol (CTRL_SCA);
}
Initmap (); Creating and initializing Maps
</script>
Front-end call Baidu 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
