在asp.net中传输时,我的反向地址解析按钮不起作用

时间:2019-03-06 03:59:23

标签: javascript asp.net reverse-geocoding

我首先在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中执行该页面时,只要将其地址分段到文本字段并将地图重定向到坐标位置,页面就会自动刷新。

0 个答案:

没有答案