2015-03-03 89 views
0

我在ASP.NET中使用HTML地理位置來獲取用戶的位置。不過,我需要得到城市名稱(如:巴黎,吉隆坡設有等),而不是緯度和Logitude它傳統上下面的代碼輸出:獲取地理位置的城市名稱

<!DOCTYPE html> 
<html> 
<body> 

<p id="demo">Click the button to get your position.</p> 

<button onclick="getLocation()">Try It</button> 

<div id="mapholder"></div> 

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script> 
var x = document.getElementById("demo"); 
function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition, showError); 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 
} 

function showPosition(position) { 
    lat = position.coords.latitude; 
    lon = position.coords.longitude; 
    latlon = new google.maps.LatLng(lat, lon) 
    mapholder = document.getElementById('mapholder') 
    mapholder.style.height = '250px'; 
    mapholder.style.width = '500px'; 

    var myOptions = { 
    center:latlon,zoom:14, 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    mapTypeControl:false, 
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
    } 

    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions); 
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); 
} 

function showError(error) { 
    switch(error.code) { 
     case error.PERMISSION_DENIED: 
      x.innerHTML = "User denied the request for Geolocation." 
      break; 
     case error.POSITION_UNAVAILABLE: 
      x.innerHTML = "Location information is unavailable." 
      break; 
     case error.TIMEOUT: 
      x.innerHTML = "The request to get user location timed out." 
      break; 
     case error.UNKNOWN_ERROR: 
      x.innerHTML = "An unknown error occurred." 
      break; 
    } 
} 
</script> 

</body> 
</html> 

我試圖表現出對標籤的位置在Page_Load的ASP頁面上:)

+0

這更多的是谷歌地圖API比asp.net,更不用說C# – 2015-03-03 09:16:44

+0

我認爲你正在尋找如何做反向與谷歌地圖地理編碼。如果是這樣,請看這裏:https://developers.google.com/maps/documentation/javascript/geocoding#ReverseGeocoding – 2015-03-03 09:19:01

回答

0

這是做你所需要的嗎?

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    #mapholder { 
     height: 300px; 
     width: 300px; 
    } 
    </style> 
</head> 
<body> 
<p id="demo">Click the button to get your position.</p> 
<button onclick="getLocation()">Try It</button> 
<div id="mapholder"></div> 
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script> 
var geocoder; // this object will handle the position<->address conversion 
var x = document.getElementById("demo"); 

function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition, showError); // , {maximumAge:60000, timeout:5000, enableHighAccuracy:true} 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 
} 

function showPosition(position) { 
    lat = position.coords.latitude; 
    lon = position.coords.longitude; 
    latlon = new google.maps.LatLng(lat, lon); 
    // okay, now we have the position (as a google maps latLng object), 
    // now we send this position to geocoder 
    // @see https://developers.google.com/maps/documentation/javascript/geocoding 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({'latLng': latlon}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     var city = getCity(results[0]); 
     x.innerHTML = 'city: ' + city; 
     } 
    }); 

    mapholder = document.getElementById('mapholder'); 
    mapholder.style.height = '250px'; 
    mapholder.style.width = '500px'; 

    var myOptions = { 
     center:latlon,zoom:14, 
     mapTypeId:google.maps.MapTypeId.ROADMAP, 
     mapTypeControl:false, 
     navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
    } 
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions); 
    var marker = new google.maps.Marker({ 
     position:latlon, 
     map:map, 
     title:"You are here!" 
    }); 
} 

function showError(error) { 
    switch(error.code) { 
     case error.PERMISSION_DENIED: 
      x.innerHTML = "User denied the request for Geolocation." 
      break; 
     case error.POSITION_UNAVAILABLE: 

      x.innerHTML = "Location information is unavailable." 
      break; 
     case error.TIMEOUT: 
      x.innerHTML = "The request to get user location timed out." 
      break; 
     case error.UNKNOWN_ERROR: 
      x.innerHTML = "An unknown error occurred." 
      break; 
    } 
} 
// more info, see my post on http://stackoverflow.com/questions/27203977/google-api-address-components 
function getCity(geocodeResponse) { 
    var type = "locality"; //the function will look through the results and find a component with type = 'locatily'. Then it returns that 
    for(var i=0; i < geocodeResponse.address_components.length; i++) { 
    for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) { 
     if (geocodeResponse.address_components[i].types[j] == type) { 
     return geocodeResponse.address_components[i].long_name; 
     } 
    } 
    } 
    return ''; 
} 
</script> 
</body> 
</html> 
相關問題