Call Baidu map shows around 100 meters, 500 meters, 1000 meters near the restaurant, hotel and bus station code
<! DOCTYPE html> <meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<title> Data Interface </title>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.2" ></script>
<body>
Address: <input type= "text" name= "Address" id= "address" value= "Shanghai"/> <button id= "Mapsearch" onclick= " Searchaddress () "> Search </button>
<div style= "width:600px;height:400px;border:1px solid Gray" id= "container" ></div>
<div id= "Results" style= "font-size:13px;margin-top:10px;" ></div>
</body>
<script type= "Text/javascript" >
var map = new Bmap.map ("container");
Map.addcontrol (New Bmap.navigationcontrol ());//Create a map with a specific style pan zoom control
Map.enablescrollwheelzoom ();
var lng=121.5;
var lat=31.3;
var point = new Bmap.point (Lng,lat);
The lng=121.5,lat=31.3 latitude and longitude show restaurants near the location when the map is automatically loaded for the first time.
Allmap (point);
When you click on the left mouse button, get click events, get click Latitude and longitude, through the latitude to search for restaurants near the radius.
Map.addeventlistener ("click", Function () {
Map.clearoverlays ();//Clear the traces left by the last event.
var center = map.getcenter ();//To get the center point of the map, return the value of the GLATLNG type.
LNG=CENTER.LNG;
Lat=center.lat;
Point = new Bmap.point (Lng,lat);
Allmap (point);
});
function Getsquarebounds (centerpoi,r) {
var a = math.sqrt (2) * r; Square Side length
Mpoi = Getmecator (Centerpoi);
var x0 = mpoi.x, y0 = MPOI.Y;
var x1 = x0 + a/2, y1 = y0 + a/2;//Northeast point
var x2 = x0-a/2, y2 = y0-a/2;//Southwest Point
var ne = getpoi (new Bmap.pixel (x1, y1)), SW = Getpoi (new Bmap.pixel (x2, y2));
return new Bmap.bounds (SW, NE);
}
The plane coordinates are obtained according to spherical coordinates.
function Getmecator (POI) {
Return Map.getmaptype (). getprojection (). Lnglattopoint (POI);
}
The spherical coordinates are obtained according to the plane coordinates.
function Getpoi (mecator) {
Return Map.getmaptype (). getprojection (). Pointtolnglat (Mecator);
}
According to latitude and longitude of this point, search for all the restaurants around the radius.
function Allmap (point) {
Map.centerandzoom (point,11);
var circle = new Bmap.circle (point,1000,{fillcolor: "Blue", Strokeweight:1, fillopacity:0.3, strokeopacity:0.3});
Map.addoverlay (circle);
var local = new Bmap.localsearch (map, {
Renderoptions: {map:map, Panel: "Results"}});
var bounds = Getsquarebounds (Circle.getcenter (), Circle.getradius ());
Local.searchinbounds ("Restaurant", bounds);//Use a circle as the range to search for the keyword.
}
The address of the input box is obtained, and the latitude and longitude of the address is obtained through address resolution. Remember that the address is only for the location of the Shanghai city area.
function searchaddress () {
var address = document.getelementbyidx_x_x_x ("Address"). Value;
var Mygeo = new Bmap.geocoder ();
Mygeo.getpoint (address, function (point) {
if (point) {
Map.addoverlay (New Bmap.marker (point));
Map.clearoverlays ();//Clear the traces left by the last event.
Allmap (point);
}}, "Shanghai City");
}
</script>
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
