<! 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 "/>
<meta name= "viewport" content= "initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no" >
<title>GeolocationControl</title>
<style type= "Text/css" >/*<! [cdata[*/
Body{margin:0;padding:0;font-family:times New Roman, serif}
p{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
#map_container {height:100%; border:1px solid #999; height:300px;}
@media print{
#notes {Display:none}
#map_container {margin:0}
}
/*]]>*/</style>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.4" ></script>
<script type= "Text/javascript" src= "Http://api.map.baidu.com/library/SearchControl/1.4/src/SearchControl_ Min.js "></script>
<link rel= "stylesheet" href= "Http://api.map.baidu.com/library/SearchControl/1.4/src/SearchControl_min.css"/ >
<link href= "Http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel= "stylesheet" Type= "Text/css"/>
<script type= "Text/javascript" src= "Http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_ Min.js "></script>
<body>
<div id= "SearchBox" ></div>
<div id= "Map_container" ></div>
<div id= "Test_container" >
Search Type
<select id= "SelectType" Name= "" >
<option value= "1" > Peripheral search </option>
<option value= "2" > Bus search </option>
<option value= "3" > Drive search </option>
</select>
</div>
</body>
<script type= "Text/javascript" >/*<! [cdata[*/
Create a Map object and initialize it
var MP = new Bmap.map ("Map_container", {
Enablehighresolution:true//whether to turn on HD
});
var point = new Bmap.point (116.404, 39.915);
Mp.centerandzoom (Point, 14); Initialize Map
Mp.enableinertialdragging (); Open Relationship Drag
Mp.enablescrollwheelzoom (); Turn On mouse scrolling zoom
Add positioning controls
var Geoctrl = new Bmap.geolocationcontrol ({
Showaddressbar:true//whether to show
, Enableautolocation:false//automatic positioning for the first time
, Offset:new bmap.size (0, 25)
, Locationicon:icon//positioned icon
});
Listening for location success events
Geoctrl.addeventlistener ("Locationsuccess", function (e) {
Console.log (e);
});
Listen for location failure events
Geoctrl.addeventlistener ("Locationerror", function (e) {
Console.log (e);
});
To add a location control to a map
Mp.addcontrol (Geoctrl);
Search Type
var type = "";
Type = Local_search; Peripheral Search
Type = Transit_route; Bus Search
Type = Driving_route; Drive Search
Create a Fishbone control
var Navctrl = new Bmap.navigationcontrol ({
Anchor:bmap_anchor_top_left//Setting the location of the Fishbone control
});
Add fish bones to the map
Mp.addcontrol (Navctrl);
Create a Search control
var SearchControl = new Bmaplib.searchcontrol ({
Container: "SearchBox"//container to hold the retrieval control
, MAP:MP//retrieve the associated map
, Type:type//Search Type
});
document.getElementById ("SelectType"). onchange = function () {
Searchcontrol.settype (This.value);
};
Add a traffic control
var ctrl = New Bmaplib.trafficcontrol ({
Showpanel:false//Whether to display the Traffic tips panel
});
Mp.addcontrol (ctrl);
Ctrl.setanchor (Bmap_anchor_top_right);
/*]]>*/</script>
Baidu Map Demo
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
