Baidu Map location Search and mouse click Place to get latitude and longitude, these are the map comparison of basic
: as follows
Code section:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "viewport" content= "initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/>
<meta name= "description" content= "Baidu map location search and mouse click Place to get latitude and longitude, these are the map more basic"/>
<meta name= "keywords" content= "Baidu map, location search, get latitude and longitude, change the map mouse style, enable wheel zoom"/>
<title> Baidu Map API location search-get latitude and longitude demo</title>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.2" ></script>
<style type= "Text/css" >*{font-family: "Microsoft Jas Black";} #where, #lonlat, #lonlat2 {width:300px; height:30px; font-size : 24px; Color:blue;} #but {width:100px; height:36px; font-size:20px;} </style>
<body>
<center>
<form>
<div style= "margin:auto;width:1000px;height:600px;border:2px solid gray; margin-bottom:50px; "id=" Container "></div>
<label> Input Location:</label>
<input id= "where" name= "where" type= "text" placeholder= "Please enter Address" >
<input id= "But" type= "button" value= "Map Find" onclick= "Sear (document.getElementById (' where '). value);"/>& nbsp; Longitude:
<input id= "Lonlat" name= "Lonlat" type= "number" maxlength= "ten" > Latitude:
<input id= "Lonlat2" name= "LONLAT2" type= "number" maxlength= "9" ></form></center>
</body>
<script type= "Text/javascript" >
If latitude and longitude are not given a default value
var longitude=105.386515;
var latitude=28.91124;
var map = new Bmap.map ("container");
Map.setdefaultcursor ("Crosshair");
Map.enablescrollwheelzoom ();
var point = new Bmap.point (longitude,latitude);
Map.centerandzoom (point, 13);
var gc = new Bmap.geocoder ();
Map.addcontrol (New Bmap.navigationcontrol ());
Map.addcontrol (New Bmap.overviewmapcontrol ());
Map.addcontrol (New Bmap.scalecontrol ());
Map.addcontrol (New Bmap.maptypecontrol ());
Map.addcontrol (New Bmap.copyrightcontrol ());
var marker = new Bmap.marker (point);
Map.addoverlay (marker);
Marker.addeventlistener ("click",
Function (e) {
document.getElementById ("Lonlat"). Value = E.POINT.LNG;
document.getElementById ("Lonlat2"). Value = E.point.lat;
});
Marker.enabledragging ();
Marker.addeventlistener ("Dragend",
Function (e) {
Gc.getlocation (E.point,
Function (RS) {
Showlocationinfo (E.point, RS);
});
});
Function Showlocationinfo (PT, RS) {
var opts = {
WIDTH:250,
height:150,
Title: "Current Location"
};
var addcomp = rs.addresscomponents;
var addr = "Current position:" + addcomp.province + "," + addcomp.city + "," + Addcomp.district + "," + Addcomp.street + "," + add Comp.streetnumber + "<br/>";
Addr + = "Latitude:" + Pt.lat + "," + "Longitude:" + pt.lng;
var Infowindow = new Bmap.infowindow (addr, opts);
Marker.openinfowindow (Infowindow);
}
Map.addeventlistener ("click",
Function (e) {
document.getElementById ("Lonlat"). Value = E.POINT.LNG;
document.getElementById ("Lonlat2"). Value = E.point.lat;
});
var traffic = new Bmap.trafficlayer ();
Map.addtilelayer (traffic);
function Iploac (Result) {
var cityname = Result.name;
}
var mycity = new Bmap.localcity ();
Mycity.get (IPLOAC);
function Sear (result) {
var local = new Bmap.localsearch (map, {
Renderoptions: {
Map:map
}
});
Local.search (result);
}
</script>
Baidu Map location Search and mouse click Place to get latitude and longitude
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
