[英]javascript google maps geocoder initialize
我正在嘗試使用 google maps javascript API 來映射基於此示例的地址。
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
該文檔建議將客戶端 javascript 方法作為處理請求配額的最佳方法。 到現在為止還挺好。 我的問題是從這個例子轉移到我的具體案例。 我的地址已經在數據庫中,所以我不需要用戶輸入。 此外,我不希望地圖與頁面一起加載。 相反,我希望在用戶單擊鏈接時加載地址的地圖。
我有一個腳本可以使用 initialize () 在 div 中加載地圖。 但我的問題是初始化以使用地理編碼。 示例中的地理編碼取決於使用我不想要的 bodyonload 初始化加載。
這是代碼。 將不勝感激任何建議:
javascript
var map;
var geocoder;
function codeAddress() {
var address = document.getElementById('address').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);
}
});
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
html
<input id="address" type="hidden" value="Palo Alto CA">
<a href="javascript:void(0)" onclick="initialize()">View map without geocoding</a>
<div id="map_canvas" style="width:300px; height:300px;"></div>
<a href="javascript:void(0)" onclick="codeAddress()">View map of geocoded address</a>
我對您的腳本的唯一問題是initialize()
函數中的以下行:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
通過聲明var map
,您的腳本只是聲明了一個名為map
的局部變量,而不是使用在腳本頂部聲明的全局map
變量。
通過刪除var
,腳本使用全局變量並運行良好:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
最后,為了讓地理編碼后加載地圖上的鏈接點擊,改變onclick
為您的地理編碼地址onclick="initialize();codeAddress();"
.
添加:
嘗試將initialize()
和codeAddress()
方法組合成以下內容:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 18,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
然后只需從您的鏈接中調用initialize()
。
基本上,我們正在做的是調用geocoder.geocode()
是codeAddress()
被執行,並將所得委托里面,我們使用results[0].geometry.location
初始化地圖。 這樣,不需要顯示臨時經緯度。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.