如何实时反转地理编码和重新填充菜单拖动标记

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

完整的演示在这里(小提琴( 选择大陆、州、地区等，我得到纬度和经度

如果我插入可拖动的标记：

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

移动地图中的标记，我想在菜单中实时更改大陆、州、城市等。可能吗？如何？

Answer 1

您可以在下拉"选项"中搜索从地理编码器返回的结果。 由于数据来自不同的来源，因此可能无法找到正确的结果，但这对我有用(至少对于堪萨斯州威奇托(，尽管它需要拖动每个地址组件。 此时，要更改它，您需要重构代码。

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

概念验证小提琴