如何扭轉地理編碼，並實時重新填充菜單拖動標記

Question

我有以下的javascript代碼：

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 
     } 
    }); 
}; 

完整的演示是here (fiddle) 選擇洲，國家，地區，等我得到的經度和緯度

如果我插入一個可拖動的標記：

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

     }); 

在地圖中移動標記我希望實時更改大陸，州，城市等e菜單。可能嗎？怎麼樣？

Answer 1

您可以搜索地理編碼器返回結果的下拉「選項」。由於數據來自不同的來源，因此可能找不到正確的結果，但這適用於我（至少對於Wichita，KS），儘管它需要對每個地址組件進行拖拽。在這一點上，改變你需要重構你的代碼。

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