從谷歌保存兩個變量映射輸入

所以這是我： http://clients.pixelbleed.net/geocoder/geocoder.html 從谷歌保存兩個變量映射輸入

我幾乎在我頭頂上這個，但我有第一個輸入框工作 ...這意味着它將採取地址，將其轉換爲緯度/經度並放置在地圖上。我所做的第二個輸入是重複codeAddress（）函數並重命名它。

我真的很想做的就是拿兩個輸入框，讓別人在地址上輸入一個地址，將其地址解碼爲經緯度並保存在一個變量中。然後，我可以操縱該變量來完成我最終需要做的等式...只是不知道如何將它們保存爲這樣。有什麼想法嗎？

這是我的JS：

<script type="text/javascript"> 
    var geocoder; 
    var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    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 codeAddress2() { 
    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); 
     } 
    }); 

    } 
</script>

這是按鈕怎麼稱呼它：

<body onload="initialize()"> 
    <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress()"> 
    </div> 
    <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress2()"> 
    </div> 
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>

來源

2011-03-28 Fuego DeBassi

您可以創建兩個全局變量，併爲其指定地理位置結果一次回調就是成功。操縱結果，然後你可以在回調函數中調用全局函數，但訣竅是你必須確保在調用全局函數之前分配了兩個變量。 – kjy112 2011-03-28 17:41:05

我創建了一個要點有一個完整的例子在這裏：https://gist.github.com/890998

我的解釋如下...

你可以創建一個javascript對象，可以st將結果作爲expando屬性進行挖掘。然後在每個地理編碼請求完成後，存儲結果，然後調用函數進行計算。

添加一個變量，你可以將結果存儲爲expando屬性

var geoResults = {};

而不是具有執行地理編碼兩個幾乎相同的功能，所以它接受地址輸入的「ID」改變它。我們也可以使用該參數id作爲我們的geoResults對象的屬性名稱。

function codeAddress(id) { 
    var address = document.getElementById(id).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 
     }); 

     // store the results in the geoResults object 
     geoResults[id] = results[0].geometry.location; 
     doCalculation(); 

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

現在我們doCalculation（）函數，我們可以只檢查是否這兩個地址已經地理編碼，如果是這樣，那麼做任何你想要的結果。

function doCalculation() { 
    if (typeof geoResults.address1 === "object" 
     && typeof geoResults.address2 === "object") { 

     // Yay.. do something now. 
     // geoResults.address1 is a LatLng() object. 
     // geoResults.address2 is a LatLng() object. 
    } 
    }

我們只需要用您的HTML更改2件事。

確保您擁有獨特的id屬性。 address1 & address2
更改onclick屬性，以便您將id作爲參數傳遞給codeAddress函數。

這裏是如何看起來

<body onload="initialize()"> 
    <div> 
    <input id="address1" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address1')"> 
    </div> 
    <div> 
    <input id="address2" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address2')"> 
    </div> 
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>

來源

2011-03-28 18:23:25 jessegavin

從谷歌保存兩個變量映射輸入

回答

相關問題