我首先在bootstrap studio中创建了我的代码,它似乎可以正常工作,但是当我在MS Visual Studio中将其传输时,反向地理编码按钮(或者我应该说整个函数本身)不会返回任何内容。这是我的反向地理编码功能:
//Reverse Geocode
//once clicked
function ReverseGeocode() {
var lat = document.getElementById("latitude").value;
var lng = document.getElementById("longitude").value;
var latlng = new google.maps.LatLng(lat, lng);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById('address').value=results[0].formatted_address;
}
}
//fragment address
var streetName;
var city;
var state;
var zip;
var country;
var placeId;
for(var j = 0; j < results[0].address_components.length; j++){
for(var k = 0; k < results[0].address_components[j].types.length; k++){
if (results[0].address_components[j].types[k] == "route"){
streetName = results[0].address_components[j].long_name;
document.getElementById('route').value = streetName;
}
else if (results[0].address_components[j].types[k] == "locality"){
city = results[0].address_components[j].long_name;
document.getElementById('city').value = city;
}
else if (results[0].address_components[j].types[k] == "administrative_area_level_2"){
state = results[0].address_components[j].long_name;
document.getElementById('administrative_area_level_2').value = state;
}
else if (results[0].address_components[j].types[k] == "postal_code"){
zip = results[0].address_components[j].long_name;
document.getElementById('postal_code').value = zip;
}
else if (results[0].address_components[j].types[k] == "country"){
country = results[0].address_components[j].long_name;
document.getElementById('country').value = country;
}
else if (results[0].address_components[j].types[k] == "place_id"){
placeId = results[0].address_components[j].long_name;
document.getElementById('location_id').value = placeId;
}
}
}
});
//calling geocodeLatLng function
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow;
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp = {
center: new google.maps.LatLng(14.6259, 121.0059),
zoom: 17,
mapTypeId: google.maps.MapTypeId.HYBRID
});
document.getElementById("ReverseGeocode").addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
return geocodeLatLng(geocoder, map, infowindow);
}//end of ReverseGeocode function
//redirect the map
function geocodeLatLng(geocoder, map, infowindow) {
var lat = document.getElementById("latitude").value;
var lng = document.getElementById("longitude").value;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'location': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
map.setZoom(17);
var marker = new google.maps.Marker({
position: latlng,
center: latlng,
map: map,
draggable: true
});
infowindow.open(map, marker);
infowindow.setContent(results[0].formatted_address);
google.maps.event.addListener(marker, 'drag', function (e) {
var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById('latitude').value=e.latLng.lat();
document.getElementById('longitude').value=e.latLng.lng();
document.getElementById('address').value=results[0].formatted_address;
}
}
infowindow.setContent(results[0].formatted_address);
//fragment address once redirected
var streetName;
var city;
var state;
var zip;
var country;
var placeId;
for(var i = 0; i < results[0].address_components.length; i++){
for(var k = 0; k < results[0].address_components[i].types.length; k++){
if (results[0].address_components[i].types[k] == "route"){
streetName = results[0].address_components[i].long_name;
document.getElementById('route').value = streetName;
}
else if (results[0].address_components[i].types[k] == "locality"){
city = results[0].address_components[i].long_name;
document.getElementById('city').value = city;
}
else if (results[0].address_components[i].types[k] == "administrative_area_level_2"){
state = results[0].address_components[i].long_name;
document.getElementById('administrative_area_level_2').value = state;
}
else if (results[0].address_components[i].types[k] == "postal_code"){
zip = results[0].address_components[i].long_name;
document.getElementById('postal_code').value = zip;
}
else if (results[0].address_components[i].types[k] == "country"){
country = results[0].address_components[i].long_name;
document.getElementById('country').value = country;
}
else if (results[0].address_components[i].types[k] == "place_id"){
placeId = results[0].address_components[i].long_name;
document.getElementById('location_id').value = placeId;
}
}
}
});
}); //end of 'drag' eventListener
//fragment address for marker dragging
var streetName;
var city;
var state;
var zip;
var country;
var placeId;
for(var i = 0; i < results[0].address_components.length; i++){
for(var k = 0; k < results[0].address_components[i].types.length; k++){
if (results[0].address_components[i].types[k] == "route"){
streetName = results[0].address_components[i].long_name;
document.getElementById('route').value = streetName;
}
else if (results[0].address_components[i].types[k] == "locality"){
city = results[0].address_components[i].long_name;
document.getElementById('city').value = city;
}
else if (results[0].address_components[i].types[k] == "administrative_area_level_2"){
state = results[0].address_components[i].long_name;
document.getElementById('administrative_area_level_2').value = state;
}
else if (results[0].address_components[i].types[k] == "postal_code"){
zip = results[0].address_components[i].long_name;
document.getElementById('postal_code').value = zip;
}
else if (results[0].address_components[i].types[k] == "country"){
country = results[0].address_components[i].long_name;
document.getElementById('country').value = country;
}
else if (results[0].address_components[i].types[k] == "place_id"){
placeId = results[0].address_components[i].long_name;
document.getElementById('location_id').value = placeId;
}
}
}
}
else { window.alert('No results found'); } }
else { window.alert('Geocoder failed due to: ' + status); }
});
} //end of geocodeLatLng function
//CSS
<i class="material-icons" style="font-size:20px; color: gray;">border_horizontal</i> <input type="text" id="latitude" name="latitude" size="20" placeholder="Latitude" style="margin:.4rem; font-family: sans-serif;" onfocus="this.value=''" autocomplete="off"/>
<i class="material-icons" style="font-size:20px; color: gray;">border_vertical</i> <input type="text" id="longitude" name="longitude" size="21" placeholder="Longitude" style="margin:.4rem; font-family: sans-serif;" onfocus="this.value=''" autocomplete="off"/>
<div> <input id="ReverseGeocode" onclick="ReverseGeocode()" type="submit" value="Reverse Geocode" title="Insert Latitude and Longitude to get address" /> </div>
在asp.net中执行该页面时,只要将其地址分段到文本字段并将地图重定向到坐标位置,页面就会自动刷新。