Google Baidu Map API to write a geographical positioning in search, welcome guidance
The code is as follows:
<!doctype html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no, width=device-width" >
<title> input prompt after query </title>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.2" ></script>
<script src= ". /api/jquery-2.1.4.min.js "></script>
<script type= "Text/javascript"
Src= "Http://webapi.amap.com/maps?v=1.3&key=ada0145080deff882d2a28e8af2047ad&plugin=AMap.Geocoder, Amap.autocomplete,amap.placesearch,amap.oncomplete "></script>
<link rel= "stylesheet" type= "Text/css" href= ". /api/api.css ">
<script src= ". /api/final.js "></script>
<body>
<div class= "Box_dis" >
<input class= "myname" type= "text" value= "Search Place" id= "Tipinput"/>
<!--<input type= "text" name= "keyword" id= "myname" class= "MyName"/>-->
</div>
<div class= "Distance" >
<div id= "Container" ></div>
</div>
<div class= "Scroll" id= "View" >
<div id= "Panel" ></div>
<div id= "Panl" ></div>
</div>
<div id= "Containe" ></div>
</body>
Js:
/**
* Created by Lixuefeng on 16-1-25.
*/
Window.onload = function () {
Input ();
GetLocation ();
Click ();
Search ();
}
function input () {
function AddListener (element, E, fn) {
if (Element.addeventlistener) {
Element.addeventlistener (E, FN, false);
}
else {
Element.attachevent ("on" + E, FN);
}
}
var tipinput = document.getElementById ("Tipinput");
AddListener (Tipinput, "click", Function () {
Tipinput.value = "";
$ ('. MyName '). CSS (' Display ', ' none ');
})
AddListener (Tipinput, "blur", function () {
Tipinput.value = "click to search";
})
}
var map, Geolocation;
Load map, invoke browser location service
var autooptions = {
Input: "Tipinput"
};
function Click () {
var clickeventlistener = Map.on (' click ', Function (e) {
var map = {Latitude:e.lnglat.getlat (), LONGITUDE:E.LNGLAT.GETLNG ()}
Localstorage.setitem ("Data", json.stringify (map));
Near_address ()
});
}
function Search () {
var auto = new Amap.autocomplete (autooptions);
var placesearch = new Amap.placesearch ({
Map:map
}); Construct a location query class
AMap.event.addListener (Auto, "select", select);//register for monitoring, will be triggered when a record is selected
function Select (e) {
Placesearch.setcity (E.poi.adcode);
Placesearch.search (E.poi.name); Keyword query Query
var poiarr = E.poi.name;
Localstorage.setitem ("Name", Json.stringify (Poiarr));
var geocoder = new Amap.geocoder ({
radius:1000//Range, default: 500
});
Geocoder.getlocation (Json.parse (Localstorage.getitem ("name")), function (status, result) {
if (status = = = ' complete ' && result.info = = = ' OK ') {
Geocoder_callback (result);
}
});
}
}
function Geocoder_callback (data) {
var map = new Bmap.map ("Containe");
$ (document). Ready (function () {
$ ("#panel"). Remove ();
});
$ ("#panl"). empty ();
var geocode = data.geocodes;
var dress = Json.parse (Localstorage.getitem ("info"))
var obj_info = {Latitude:geocode[0].location.getlat (), LONGITUDE:GEOCODE[0].LOCATION.GETLNG ()}//gaiII
Localstorage.setitem ("Data", Json.stringify (Obj_info));
Get_address ()
}
function GetLocation () {
Map = new Amap.map (' container ', {
Resizeenable:true
});
if (navigator.geolocation) {
Navigator.geolocation.getCurrentPosition (showposition);
}
Map.plugin (' Amap.geolocation ', function () {
geolocation = new Amap.geolocation ({
enablehighaccuracy:true,//whether to use high precision positioning, default: True
timeout:10000,//stop positioning after 10 seconds, default: Infinity
Buttonoffset:new Amap.pixel (10, 10),///Position button offset with Set docking position, default: Pixel (10, 20)
Zoomtoaccuracy:true,//Adjust the map's field of view after successful positioning to make the location and accuracy range visible in the field of view, default: False
Buttonposition: ' RB '
});
Map.addcontrol (geolocation);
Geolocation.getcurrentposition ();
});
$ ('. Amap-logo '). CSS (' Display ', ' none ');
$ ('. Amap-copyright '). CSS (' Display ', ' none ');
$ ('. Amap-geo '). CSS (' Display ', ' none ');
}
function Showposition (position) {
var obj_info = {latitude:position.coords.latitude, longitude:position.coords.longitude};
Console.log (Obj_info.latitude)
Localstorage.setitem ("Info", Json.stringify (Obj_info));
Displaypoi ()
}
function near_address () {
$ (document). Ready (function () {
$ ("#panel"). Remove ();
});
$ ("#panl"). empty ();
Get_address ()
}
var map = new Bmap.map ("Containe");
var moption = {
poiradius:2500,//POI within 1000 m radius, default 100 m
NUMPOIS:30//List of 50 poi, default of 10
}
Map.centerandzoom (Mpoint, 15);
Map.enablescrollwheelzoom ();
var Mygeo = new Bmap.geocoder ();
function get_address () {
var mpoint = new Bmap.point (Json.parse (Localstorage.getitem ("Data")). Longitude + 0.0065, Json.parse ( Localstorage.getitem ("Data")). Latitude + 0.0060);
var Mygeo = new Bmap.geocoder (); Creating an instance of Address resolution
Mygeo.getlocation (Mpoint,
Function Mcallback (RS) {
var Allpois = Rs.surroundingpois; Get all poi (the point radius is 6 poi points within 100 meters)
Allpois.foreach (the function (place) {
var html = "<div class= ' list ' ><div class= ' site ' id=" + Place.title + ">" + place.title + "</div><div class= ' Site_down ' > ' + place.address + ' </div><span class= ' right ' ></span></div></div> ";
$ ("#panl"). Append (HTML);
$ ($.parsehtml (HTML, document, True)). AppendTo ("body");
$ (document). Ready (function () {
$ (' # ' + place.title). Click (function () {
$ ('. Tex '). CSS (' Display ', ' none ');
$ (' # ' + Place.title). Show ();
});
});
})
}, Moption
);
}
function Displaypoi () {
var mpoint = new Bmap.point (Json.parse (Localstorage.getitem ("info")). Longitude + 0.0065, Json.parse ( Localstorage.getitem ("info")). Latitude + 0.0060);
SS (Mpoint)
}
function SS (Mpoint) {
Map.addoverlay (New Bmap.circle (Mpoint, 0)); Add a circular overlay
Mygeo.getlocation (Mpoint,
Function Mcallback (RS) {
var Allpois = Rs.surroundingpois; Get all poi (the point radius is 6 poi points within 100 meters)
Allpois.foreach (the function (place) {
var html = "<div class= ' list ' ><div class= ' site ' id=" + Place.title + ">" + place.title + "</div><div class= ' Site_down ' > ' + place.address + ' </div><span class= ' right ' ></span></div></div> ";
$ ("#panel"). Append (HTML);
$ (document). Ready (function () {
$ (' # ' + place.title). Click (function () {
$ ('. Tex '). CSS (' Display ', ' none ');
$ (' # ' + Place.title). Show ();
});
});
})
}, Moption
);
}
Browser-based targeting in search
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
