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

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!'

      });

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

Answer 1

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

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

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

How to reverse geocoding and repopulate menu in real time dragging marker

javascript

google-maps

reverse-geocoding

google-maps-markers

drop-down-menu