Comment inverser géocodage et repeupler le menu en temps réel en faisant glisser le marqueur

-3

Je suit le code javascript:Comment inverser géocodage et repeupler le menu en temps réel en faisant glisser le marqueur

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

démo complète est here (fiddle) Sélection Continent, état, région, etc j'obtenir la latitude et la longitude

Si j'insérer un marqueur draggable:

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

     });

Déplacement du marqueur sur la carte Je veux changer continent en temps réel, état, ville, etc dans e e menu C'est possible? Comment?

Source

2017-08-03 grigione

geonames.org, jamais entendu parler, mais il semble assez intéressant, peut-être. Voyez si cela aide: Après avoir déplacé le marqueur, il place les composants d'adresse dans les éléments d'entrée; chercher ma réponse https://stackoverflow.com/questions/44030800/google-places-api-with-search-engine-and-draggable-marker-and-that-puts-coordina/44080553#44080553 –

ok je vais essayer pour adapter votre code – grigione

duplicata possible de [google api reverse geocode] (https://stackoverflow.com/questions/32415365/google-api-reverse-geocode) – geocodezip

Vous pouvez rechercher les "options" déroulantes pour le résultat renvoyé par le géocodeur. Il est possible que les données proviennent de sources différentes, il peut ne pas trouver le résultat correct, mais cela fonctionne pour moi (au moins pour Wichita, KS), bien qu'il nécessite un glisser pour chaque composant d'adresse. À ce stade, pour modifier ce que vous auriez besoin de refactoriser votre code.

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

Source

2017-08-11 15:18:46 geocodezip

Comment inverser géocodage et repeupler le menu en temps réel en faisant glisser le marqueur

Répondre

Questions connexes