2009-07-08 49 views
4

首先我想說,我是這個網站的新手,從未使用過Google Maps API並擁有JavaScript的中級知識。在自定義Google地圖中添加郵政編碼的搜索

我做了什麼: 我把一個自定義的「商店定位器」添加到谷歌的「我的地圖」的位置。然後我創建了一個帶有下拉菜單的網頁,根據您從下拉菜單中選擇的位置,它會更改持有地圖的iFrame的SRC。因此,當頁面加載時,您會看到更大比例的地圖,並通過選擇特定位置,它會將地圖更改爲該特定位置(縮放和裁剪)。

我需要做的: 我需要現在要做的,完成這個地圖是增加,這將允許用戶把他們的郵政編碼和互聯網網頁回報「按郵政編碼搜索」最近的地點列表,希望他們的距離。

有沒有人有一個想法,如果我可以添加'搜索拉鍊'功能,我的自定義谷歌地圖?

我的代碼實際上沒有太多要發佈的內容,但如果它有幫助,我會很樂意這樣做。我的地圖目前的功能很好,問題是我不知道從哪裏開始添加郵政編碼搜索。

下面是該頁面的鏈接,我指的是:http://74.53.82.155/store-locator.htm

任何幫助表示讚賞。

由於提前, gnrlchaos

回答

3

一個選項是使用geonames web服務returns locations from zip codes。以下是如何與dojo一起使用該Web服務的簡單示例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title></title> 
     <link rel="stylesheet" type="text/css" href="layout.css"> 
     <script type="text/javascript">var djConfig = { parseOnLoad: true }</script> 
     <script type="text/javascript" src="../dojo-release-1.3.0/dojo/dojo.js"></script> 
     </script> 
     <script type="text/javascript"> 
      dojo.require("dojo.io.script"); 
       function getPlace() { 
     var zip = dojo.byId('zipcode').value; 
     console.log('zip is ', zip); 
     //use country code to get results for a specific country 
     //var gn_url = 'http://ws.geonames.org/postalCodeLookupJSON?postalcode=' + zip + '&country=US'; 
     var gn_url = 'http://ws.geonames.org/postalCodeLookupJSON?postalcode=' + zip; 
     console.log(gn_url); 
     dojo.io.script.get({ 
      url: gn_url, 
      callbackParamName: "callback", 
      load:function(response, io) { 
      console.log('got json.'); 
      console.dir(response); 
      places = response.postalcodes; 
      var infos = [] 
      dojo.forEach(places, function(p, i) { 
       infos[i] = p.placeName + ', ' + p.adminName1 + ', Lat: ' + p.lat + '; Long: ' + p.lng + '<br />'; 
      }); 
       dojo.byId('postalCode').innerHTML = infos.join(''); 
      }, 
      error:errorCb 
     }); 
     } 

     function errorCb(type, data, evt){ 
       debug(data); 
     } 
     </script> 
    </head> 
    <body class="tundra"> 
    Enter a zip code: <input id="zipcode" type="text" /> <button onclick="getPlace(); return false;" value="Find Place.">Find Place.</button> 
     <div>Places:</div><div id="postalCode"></div> 
    </body> 
</html> 
1

我不知道有什麼方法在你所希望的方式與嵌入谷歌地圖進行互動。最好的選擇是用Google Maps API創建你自己的地圖。谷歌有一些偉大的documentationexamples讓你開始。

0

嘿,我正在進行類似的搜索。我發現了一個相關數學的很好的討論,以及查詢和公式的鏈接,在這裏:http://uclue.com/?xq=2861。希望這可以幫助。