將谷歌地圖設爲地理編碼加載的郵政編碼

我使用Google Maps API根據郵政編碼顯示地圖，郵政編碼然後使用Google的地理編碼服務（https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple）將郵政編碼轉換爲經度和緯度並顯示地圖。將谷歌地圖設爲地理編碼加載的郵政編碼

Google頁面上的示例使用一個按鈕來激活地理編碼功能，我已將該代碼作爲起點。然而，我不想要一個按鈕，我想在後面的代碼中進行硬編碼（我將用稍後從自定義元輸入中獲取的字符串替換它）。我將如何調整此代碼以獲取我在地址變量中聲明的郵政編碼，並在初始加載時加載它，而不是單擊該按鈕？

希望這是有道理的。

<script src="http://maps.googleapis.com/maps/api/js?key=XXX&sensor=false" type="text/javascript"></script> 
            <script> 
             var geocoder; 
             var map; 
             function initialize() { 
              geocoder = new google.maps.Geocoder(); 
              var latlng = new google.maps.LatLng(-34.397, 150.644); 
              var mapOptions = { 
              zoom: 8, 
              center: latlng, 
              mapTypeId: google.maps.MapTypeId.ROADMAP 
              } 
              map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
             } 

             function codeAddress() { 
              var address = 'PO19 1DQ'; 
              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); 
              } 
              }); 
             } 

             google.maps.event.addDomListener(window, 'load', initialize); 
            </script> 
            <input type="button" value="Geocode" onclick="codeAddress()"> 
            <div id="map-canvas" style="width:100%;height:300px;"></div>

來源

2013-07-18 jasonbradberry

就叫codeAddress從初始化（）函數，例如： -

function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var mapOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     codeAddress(); 
}

來源

2013-07-18 13:58:33 phil

當這似乎運作良好。我還將該函數中的默認緯度和經度設置爲「0,0」，這會停止地圖在等待地理編碼發生時閃爍另一個位置的視圖。 – jasonbradberry

的底部已經有負載eventListener。

google.maps.event.addDomListener(window, 'load', initialize);

so so codeAddress() method in it。

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
codeAddress(); 
}

檢查這個Fiddle

來源

2013-07-18 13:59:51 Praveen

你不能做到這一點，在初始化，因爲地理編碼是異步的，你不會有當時的定位。但是你可以初始化後調用地理編碼，你會盡快geocing完成中心：

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    codeAddress(); 
} 

function codeAddress() { 
    var address = 'PO19 1DQ'; 
    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); 
    } 
    }); 
}

當然，你可以看到一些延遲，如果是這樣的問題，那麼你可以：

初始化隱藏地圖格您的網頁，並顯示它時，從地理編碼的結果是你的頁面加載後立即可用
啓動地理編碼和init地圖地理編碼完成

來源

2013-07-18 14:05:18 gawi

將谷歌地圖設爲地理編碼加載的郵政編碼

回答

相關問題