Note: Use the time will get Beijing location that put to get longitude latitude behind can
52130772
<! DOCTYPE html>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Get Current Location </title>
<style type= "Text/css" >
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container {height:500px; width:500px; margin:0 Auto;}
</style>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.3" >
v2.0 version reference: src= "http://api.map.baidu.com/api?v=2.0&ak= your Key"
v1.4 version and previous version of reference: Src= "http://api.map.baidu.com/api?v=1.4&key= your key &callback=initialize"
</script>
<body>
<div style= "Text-align:center; margin:20px auto; " >
<p id= "Demo" > Click this button to get your latitude and longitude:</p>
<p id= "Position" ></p>
<button onclick= "getLocation ()" > Get location </button>
</div>
<div id= "Container" ></div>
<script type= "Text/javascript" >
var map;
var ggpoint;
var marker;
function GetLocation () {
Get City based on IP
var mycity = new Bmap.localcity ();
Mycity.get (GETCITYBYIP);
var options={
Enablehighaccuracy:true,
maximumage:1000
}
if (navigator.geolocation) {
Browser support geolocation
Navigator.geolocation.getCurrentPosition (onsuccess,onerror,options);
}else{
Browser does not support geolocation
Console.log ("Browser not supported");
}
}
function onsuccess (position) {
var longitude =position.coords.longitude;//Longitude
var latitude = position.coords.latitude;//Latitude
document.getElementById ("Demo"). InnerHTML = "program has obtained your location for:<br> longitude" +longitude+ ", latitude" +latitude;
--------------Set the map display----------------
Map = new Bmap.map ("container"); Create a Map instance
Ggpoint = new Bmap.point (longitude, latitude); Create point coordinates
Map.centerandzoom (Ggpoint, 15); Initialize map, set center point coordinates and map level
--------------Set the map display----------------
var convertor = new Bmap.convertor ();
var pointarr = [];
Pointarr.push (Ggpoint);
Convertor.translate (Pointarr, 1, 5, translatecallback);
--------------set label-related-------------------
/*var marker = new Bmap.marker (point); Create point
Map.addoverlay (marker);
Marker.setanimation (bmap_animation_bounce); Bouncing animations
Marker.enabledragging ();//Set point to drag
--------------set label-related---------------------
--------------Get a location---------------------
var GEOC = new Bmap.geocoder ();
Geoc.getlocation (Point, Function (RS) {
var addcomp = rs.addresscomponents;
Alert (addcomp.province + "," + addcomp.city + "," + Addcomp.district + "," + Addcomp.street + "," + addcomp.streetnumb ER);
});*/
--------------Get a location----------------------
}
callback function after the coordinate conversion is complete
function Translatecallback (data) {
if (data.status = = = 0) {
Marker = new Bmap.marker (data.points[0]);
Map.addoverlay (marker);
Marker.setanimation (bmap_animation_bounce); Bouncing animations
Marker.enabledragging ();//Set point to drag
Marker.addeventlistener ("Dragend", getAttr);
Alert (Marker.getposition ());
Map.setcenter (Data.points[0]);
Getposit (Data.points[0]);
}
}
function GetAttr () {
var p = marker.getposition (); Get the location of marker
Alert ("Marker position is" + p.lng + "," + P.lat);
Getposit (New Bmap.point (P.LNG, P.lat));
}
function Getposit (obj) {
var GEOC = new Bmap.geocoder ();
Geoc.getlocation (obj, function (RS) {
var addcomp = rs.addresscomponents;
Alert (addcomp.province + "," + addcomp.city + "," + Addcomp.district + "," + Addcomp.street + "," + ADDCOMP.STREETNU Mber);
var address = "Your addresses:" + addcomp.province + "," + addcomp.city + "," + Addcomp.district + "," + Addcomp.street + "," + ADDC Omp.streetnumber;
document.getElementById ("position"). InnerHTML = Address;
var Labelbaidu = new Bmap.label (address, {offset:new bmap.size (20,-10)});
Marker.setlabel (Labelbaidu); Add Baidu Label
});
}
Get City based on IP
Function Getcitybyip (RS) {
var cityname = Rs.name;
Alert ("Locate your city based on IP:" + cityname);
}
When failed
function OnError (Error) {
Switch (error.code) {
Case 1:
Alert ("Location service is denied");
Break
Case 2:
Alert ("Temporary access to location information");
Break
Case 3:
Alert ("Get information timed out");
Break
Case 4:
Alert ("Unknown error");
Break
}
}
</script>
</body>
HTML5 get geographical latitude and longitude and get real-time location via Baidu interface