如何在地址，郵政編碼和城市位於不同的輸入字段中進行地理定位

我需要分隔地址，郵編和城市的輸入。現在我想知道我可以如何凝膠化。在Google Devleloper documentation中，只有一個輸入字段。有人知道我可以如何用三個輸入字段進行地理定位嗎？如何在地址，郵政編碼和城市位於不同的輸入字段中進行地理定位

來源

2015-11-01 Andreas Schantl

正好連接三個字段連接成一個字符串...
像這樣的東西應該可以正常工作，提供有效的API_KEY

<label for="street">Street: </label><input type="text" id="street" /><br/> 
<label for="city">City: </label><input type="text" id="city" /><br/> 
<label for="zip">Zip code: </label><input type="text" id="zip" /><br/> 
<label for="submit">Submit: </label><input type="submit" id="submit" /><br/> 

<div id="map"></div> 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&"></script> 

<script> 
    window.addEventListener('load', initMap, false); 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 8, 
     center: {lat: -34.397, lng: 150.644} 
    }); 
    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    }); 
    } 

    function geocodeAddress(geocoder, resultsMap) { 
    // CONCATENATE ADDRESS HERE 
    var address = document.getElementById('street').value + ' ' + 
        document.getElementById('city').value + ' ' + 
        document.getElementById('zip').value; 

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

來源

2015-11-02 00:21:32 WhiteHat

這是一個根據您的請求3場。地址，城市，郵政編碼。我已將美國的Brooklin New York的延遲時間改爲。

祝您好運

的

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geocoding service</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
#floating-panel { 
    position: absolute; 
    top: 10px; 
    left: 25%; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
    text-align: center; 
    font-family: 'Roboto','sans-serif'; 
    line-height: 30px; 
    padding-left: 10px; 
} 

    </style> 
    </head> 
    <body> 
    <div id="floating-panel"> 


     Address: <input id="address" type="textbox" value="United States"> 
     City: <input id="city" type="textbox" value="New York"> 
     Zip Code: <input id="zip" type="textbox" value="11206"> 

     <input id="submit" type="button" value="Geocode"> 
    </div> 
    <div id="map"></div> 
    <script> 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 8, 
    center: {lat: 40.692129, lng: -73.5376278} 
    }); 
    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
    geocodeAddress(geocoder, map); 
    }); 
} 

function geocodeAddress(geocoder, resultsMap) { 



    var address = document.getElementById('address').value; 
    var city = document.getElementById('city').value; 
    var zip = document.getElementById('zip').value; 

    geocoder.geocode({'address': address + ", " + city + " " + zip}, function(results, status) { 

    if (status === google.maps.GeocoderStatus.OK) { 
     resultsMap.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
     map: resultsMap, 
     position: results[0].geometry.location 
     }); 

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

    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=ADD YOUR API KEY HERE&signed_in=true&callback=initMap" 
     async defer></script> 
    </body> 
</html>

來源

2015-11-02 00:58:06 Miguel

如何在地址，郵政編碼和城市位於不同的輸入字段中進行地理定位

回答

相關問題