Wie Geokodierung umkehren und

Question

Marker ziehen Menü in Echtzeit repopulate

ich Javascript-Code folgende haben:

function getLatLng() { 
    var geocoder = new google.maps.Geocoder(); 
    var address = document.getElementById('address2').value; 

    var input = document.getElementById('address2'); 
    var options = { 
    types: [], 
    }; 

var autocomplete = new google.maps.places.Autocomplete(input, options); 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latLng = results[0].geometry.location; 
      $('#lat').val(results[0].geometry.location.lat()); 
      $('#lng').val(results[0].geometry.location.lng()); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
function getLatLng2() { 
    var geocoder = new google.maps.Geocoder(); 
    var e = document.getElementById('city'); 
var address = e.options[e.selectedIndex].text; 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latLng = results[0].geometry.location; 
      $('#lat').val(results[0].geometry.location.lat()); 
      $('#lng').val(results[0].geometry.location.lng()); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
function getLatLng3() { 
    var geocoder = new google.maps.Geocoder(); 
    var e = document.getElementById('region'); 
var address = e.options[e.selectedIndex].text; 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latLng = results[0].geometry.location; 
      $('#lat').val(results[0].geometry.location.lat()); 
      $('#lng').val(results[0].geometry.location.lng()); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
function getLatLng4() { 
    var geocoder = new google.maps.Geocoder(); 
    var e = document.getElementById('province'); 
var address = e.options[e.selectedIndex].text; 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latLng = results[0].geometry.location; 
      $('#lat').val(results[0].geometry.location.lat()); 
      $('#lng').val(results[0].geometry.location.lng()); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
function getLatLng5() { 
    var geocoder = new google.maps.Geocoder(); 
    var e = document.getElementById('country'); 
var address = e.options[e.selectedIndex].text; 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latLng = results[0].geometry.location; 
      $('#lat').val(results[0].geometry.location.lat()); 
      $('#lng').val(results[0].geometry.location.lng()); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
function getLatLng6() { 
    var geocoder = new google.maps.Geocoder(); 
    var e = document.getElementById('continent'); 
var address = e.options[e.selectedIndex].text; 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latLng = results[0].geometry.location; 
      $('#lat').val(results[0].geometry.location.lat()); 
      $('#lng').val(results[0].geometry.location.lng()); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
// 

var whos = null; 
var placedata = []; 
var geocoder = new google.maps.Geocoder(); 
var map; 
function getplaces(gid, src) { 
    if (!! placedata[gid]) { 
     map.setCenter({ 
      lat: parseFloat(placedata[gid].lat), 
      lng: parseFloat(placedata[gid].lng) 
     }); 
     switch (src) { 
      case "continent": 
       map.setZoom(3); 
       break; 
      case "country": 
       map.setZoom(5); 
       break; 
      case "province": 
       map.setZoom(6); 
       break; 
      case "region": 
       map.setZoom(7); 
       break; 
      case "city": 
       map.setZoom(8); 
       break; 
     } 
     codeAddress(placedata[gid].name); 
    } 

    whos = src; 


    // var request = "http://ws.geonames.org/childrenJSON?geonameId="+gid+"&callback=getLocation&style=long"; 
    var request = "http://www.geonames.org/childrenJSON?geonameId=" + gid + "&callback=listPlaces&style=long"; 
    aObj = new JSONscriptRequest(request); 
    aObj.buildScriptTag(); 
    aObj.addScriptTag(); 
} 

function listPlaces(jData) { 
    counts = jData.geonames.length < jData.totalResultsCount ? jData.geonames.length : jData.totalResultsCount; 
    who = document.getElementById(whos); 
    who.options.length = 0; 

    if (counts) who.options[who.options.length] = new Option('Select', ''); 
    else who.options[who.options.length] = new Option('No Data Available', 'NULL'); 

    for (var i = 0; i < counts; i++) { 
     who.options[who.options.length] = new Option(jData.geonames[i].name, jData.geonames[i].geonameId); 
     placedata[jData.geonames[i].geonameId] = jData.geonames[i]; 
    } 

    delete jData; 
    jData = null; 
} 
function zoomto(gid) { 
    if (!! placedata[gid]) { 
     map.setCenter({ 
      lat: parseFloat(placedata[gid].lat), 
      lng: parseFloat(placedata[gid].lng) 
     }); 
     map.setZoom(14); 
    } 
} 

function codeAddress(address) { 
    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (!!results && !!results[0] && !!results[0].geometry && !!results[0].geometry.viewport) { 
       map.fitBounds(results[0].geometry.viewport); 
      } else if (!!results && !!results[0] && !!results[0].geometry && !!results.geometry.bounds) { 
       map.fitBounds(results[0].geometry.bounds); 
      } else { 
       map.setCenter(results[0].geometry.location); 
      } 
var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     });   

     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 

function codeAddress2() { 
    var address = document.getElementById('address2').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 


window.onload = function() { 
    getplaces(6295630, 'continent'); 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 3, 
     center: { 
      lat: 0, 
      lng: 0 
     } 
    }); 
}; 

komplette Demo ist here (fiddle) Auswahl Kontinent, Staat, Region, etc. ich Breiten- und Längen

wenn ich einen ziehbar Marker einfügen:

var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location, 
      draggable:true, 
      title: 'Drag Me!' 

     }); 

bewegen der Markierung in der Karte in Echtzeit Kontinent ich ändern wollen, Staat, Stadt, etc in th Das Menü. Ist es möglich? Wie?

Answer 1

Sie können die Dropdown-Optionen für das zurückgegebene Ergebnis aus dem Geocodierer suchen. Es ist möglich, dass, da die Daten aus verschiedenen Quellen stammen, es möglicherweise nicht das richtige Ergebnis findet, aber das funktioniert für mich (zumindest für Wichita, KS), obwohl es für jede Adresskomponente ein Ziehen erfordert. An diesem Punkt müssen Sie Ihren Code umgestalten, um dies zu ändern.

function setDropdown(menuId, string) { 
    var menu = document.getElementById(menuId); 
    var selectedIndex = menu.selectedIndex; 
    for (var option = 0; option < menu.options.length; option++) { 
    if (nodeValue(menu.options[option]).indexOf(string) != -1) { 
     if (selectedIndex != option) { 
     menu.options[option].setAttribute("selected", "selected"); 
     menu.onchange(); 
     } 
     break; 
    } 
    } 
} 

function displayAddress(address) { 
    for (var p = address.length - 1; p >= 0; p--) { 
    for (var t = 0; t < address[p].types.length; t++) { 
     if (address[p].types[t] == "country") { 
     setDropdown('country', address[p].long_name); 
     } 
     if (address[p].types[t] == "administrative_area_level_1") { 
     console.log("admin_area_level_1=" + address[p].long_name); 
     setDropdown('province', address[p].long_name) 
     } 
     if (address[p].types[t] == "administrative_area_level_2") { 
     console.log("admin_area_level_2=" + address[p].long_name); 
     setDropdown('region', address[p].long_name) 
     } 
     if (address[p].types[t] == "locality") { 
     console.log("locality=" + address[p].long_name); 
     setDropdown('city', address[p].long_name); 
     } 
    } 
    } 
} 

proof of concept fiddle