Winodw.navigater using the Map API to show your current location

"Course" web2.0 programming
"Job Requirements" study Winodw.navigater objects, write a JavaScript program, collect geolocation information, and use map APIs such as Baidu or high-tak to show the user's current location on the map.
Reference Document HTML5 geo-positioning W3school Reference manual

"Experimental environment" Ubantu Firefox

I'm using Google's API here.

1. First, let's place a simple interface:

<! DOCTYPE html> button to get ur position </p><button id= "Get" >tyi</button><div id= "Mapholder" ></div></body>
From the script tag, I wrote a script.js and a link to Google's API.
The 1.HTML5 geolocation API is used to obtain the user's geographic location. where the GetCurrentPosition () method is used to obtain the user's location.
functiongetLocation () {//detect whether geo-targeting is supported  if(navigator.geolocation)//if supported, run the GetCurrentPosition () method      //if GetCurrentPosition () runs successfully      //returns a coordinates object to the function specified in the parameter showposition      //the second parameter of the GetCurrentPosition () method is used to handle errors      //It specifies the function that runs when the user location fails to getnavigator.geolocation.getCurrentPosition (Showposition,showerror); Else    //if not supported, a message is displayed to the userX.innerhtml= "Geolocation is not supported by this browser.";}
2. Follow the Google Maps API format requirements and display the map in my page:
//the Showposition () function obtains and displays the longitude and latitudefunctionshowposition (position) {lat=Position.coords.latitude; Lon=Position.coords.longitude; LatLon=Newgoogle.maps.LatLng (lat, lon) Mapholder=document.getelementbyid (' Mapholder ') Mapholder.style.height= ' 250px '; Mapholder.style.width= ' 500px '; varmyoptions={center:latlon,zoom:14, MapTypeId:google.maps.MapTypeId.ROADMAP, Maptypecontrol:false, Navigationcontroloptions:{style:google.maps.navigationcontrolstyle.small}}; varmap=NewGoogle.maps.Map (document.getElementById ("Mapholder"), myoptions); varMarker=NewGoogle.maps.Marker ({position:latlon,map:map,title: "You are here!"}); }
The second parameter of the 3.getCurrentPosition () method is used to handle the error, which specifies the function that runs when the user location fails. Here I define the ShowError function.
functionShowError (Error) {Switch(error.code) {//Permission denied-user does not allow geo-location     Caseerror. Permission_denied:x.innerhtml= "User denied the request for geolocation.";  Break; //Position Unavailable-Unable to get current position     Caseerror. Position_unavailable:x.innerhtml= "Location information is unavailable.";  Break; //Timeout-operation timed out     Caseerror. Timeout:x.innerhtml= "The request to get a user location timed out".  Break; //Unknown error location errors     Caseerror. Unknown_error:x.innerhtml= "An unknown error occurred.";  Break; }}
My complete JS code is as follows:
Window.onload=function() {document.getElementById ("Get"). onclick=getLocation;}varX=document.getelementbyid ("Demo");functiongetLocation () {//detect whether geo-targeting is supported  if(navigator.geolocation)//if supported, run the GetCurrentPosition () method      //if GetCurrentPosition () runs successfully      //returns a coordinates object to the function specified in the parameter showposition      //the second parameter of the GetCurrentPosition () method is used to handle errors      //It specifies the function that runs when the user location fails to getnavigator.geolocation.getCurrentPosition (Showposition,showerror); Else    //if not supported, a message is displayed to the userX.innerhtml= "Geolocation is not supported by this browser.";}//the Showposition () function obtains and displays the longitude and latitudefunctionshowposition (position) {lat=Position.coords.latitude; Lon=Position.coords.longitude; LatLon=Newgoogle.maps.LatLng (lat, lon) Mapholder=document.getelementbyid (' Mapholder ') Mapholder.style.height= ' 250px '; Mapholder.style.width= ' 500px '; varmyoptions={center:latlon,zoom:14, MapTypeId:google.maps.MapTypeId.ROADMAP, Maptypecontrol:false, Navigationcontroloptions:{style:google.maps.navigationcontrolstyle.small}}; varmap=NewGoogle.maps.Map (document.getElementById ("Mapholder"), myoptions); varMarker=NewGoogle.maps.Marker ({position:latlon,map:map,title: "You are here!"}); }functionShowError (Error) {Switch(error.code) {//Permission denied-user does not allow geo-location     Caseerror. Permission_denied:x.innerhtml= "User denied the request for geolocation.";  Break; //Position Unavailable-Unable to get current position     Caseerror. Position_unavailable:x.innerhtml= "Location information is unavailable.";  Break; //Timeout-operation timed out     Caseerror. Timeout:x.innerhtml= "The request to get a user location timed out".  Break; //Unknown error location errors     Caseerror. Unknown_error:x.innerhtml= "An unknown error occurred.";  Break; }}
See the following:
Winodw.navigater using the Map API to show your current location