HTML5-based geolocation get geolocation, with Google Map API Reverse address resolution (get the real address of the user)
Html
1 <!DOCTYPE HTML>2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 4 <Head>5 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />6 <title>geolocation get geolocation, with Google Map API reverse address resolution,Get the current location and show it on Google Maps</title>7 <ScriptAsync defer src= "Http://maps.google.cn/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&callback=initMap">8 </Script>9 </Head>Ten One <Body> A <DivID= "Map"style= "width:890px; height:640px"></Div> - </Body> - the </HTML>
JS section
1<script type= "Text/javascript" >2 varGeocoder;3 vardisplay = "";4 varmap;5 6 functionInitmap () {7Geocoder =NewGoogle.maps.Geocoder ();8 9 if(navigator.geolocation) {Ten //Get Current Location OneNavigator.geolocation.getCurrentPosition (function(position) { A varcoords =position.coords; - Console.log (coords); - //Specify a coordinate point on a Google map, specifying the horizontal and vertical coordinates of the sitting punctuation the varLATLNG =Newgoogle.maps.LatLng (Coords.latitude, coords.longitude); - varMyoptions = { -Zoom:12,//setting magnification -CENTER:LATLNG,//Sets the map center point to the specified coordinate point +MapTypeId:google.maps.MapTypeId.ROADMAP//Specify map Type - }; + //Create a map and show it in the page map AMap =NewGoogle.maps.Map (document.getElementById ("Map"), myoptions); at varMarker =NewGoogle.maps.Marker ({ -POSITION:LATLNG,//label the previously set coordinates -Map:map//set the callout in the map you just created - }); - //Address name Resolution - Geocoder.geocode ({ in' Location ': latlng//latitude/Longitude coordinates - //' address ': ' Nanjing ' string or fill in the place where it needs to be resolved. to},function(results, status) { + if(Status = =Google.maps.GeocoderStatus.OK) { -Console.log ("Acquired latitude and Longitude:");//Address_components:array (6), formatted_address: "Nanjing, Jiangsu Province, China", theConsole.log (results[0]) *display = "Address:" + results[0].formatted_address;//Best match address after formatting (place name can be small to street) $ Panax NotoginsengConsole.log ("Location:" +display); - varInfowindow =NewGoogle.maps.InfoWindow ({ theContent: "<span style= ' font-size:13px ' ><b> latitude and Longitude: </b>" + +"LATLNG" + latlng + "<br>" + display + "</span>", A //offset of coordinates thepixeloffset:0, +Position:results[0].geometry.location//Geocodergeometry Object - $ }); $ //Open the Information window by default and click the pop-up Info window - infowindow.open (map, marker); -Google.maps.event.addListener (marker, ' click ',function() { the infowindow.open (map, marker); - });Wuyi}Else { theAlert ("Geocode is not successful for the following reason:" +status); - } Wu }); - About }, $ function(Error) { - //Handling Errors - Switch(error.code) { - Case1: AAlert ("Location service is denied. "); + Break; the Case2: -Alert ("Temporarily not getting location information.") "); $ Break; the Case3: theAlert ("Get information timed out. "); the Break; the default: -Alert ("Unknown error. "); in Break; the } the }); About}Else { theAlert ("Your browser does not support HTML5 for geo-location information. "); the } the } +</script>
HTML5-based geolocation get geolocation, with Google Map API Reverse address resolution (get the real address of the user)
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
