谷歌地圖：店鋪定位器

我即將開始設計一家商店的商店定位器。我有幾條關於最佳路線的問題。主要問題位於加粗。谷歌地圖：店鋪定位器

將有兩列，1地圖本身和1當前位於地圖視圖中的所有商店的清單。我希望谷歌地圖可以放在美國地圖上，並在美國各地都有多邊形，並在其中有商店。多邊形不需要動態加載，他們可以從該列表中手動編輯：Geo Boundaries

是否有任何函數或方法，你會建議我用這將動態地找出哪些標誌/存儲信息顯示在僅僅通過查看當前哪些標記正在查看第二列？例如，假設美國地圖已加載，2個州有多邊形（密歇根州和弗洛里亞州）。每個密歇根和佛羅里達州的經銷商都位於右側。如果該人點擊密歇根州的多邊形，那麼該地圖將放在位於密歇根州的所有標記上，並且只更新密鑰標記。如果客戶再次放大到南部密執安，則只有當前仍在查看的標記顯示在列上。

我的第二個問題是，賣場會有一定的「屬性」，他們說，我希望有某種過濾系統的地圖。可以說，如果商店講西班牙語，或者他們在哪裏修理中心，商店可以分類。如果勾選「只講西班牙語的商店」，那麼所有不會說西班牙語的商店都將被卸載（或者只有西班牙語的商店纔會刷新）。非常類似於Sprint的網站：Sprints Store Locator（但是，我要尋找一個AJAX的解決方案）編輯：更好的王牌硬件之一：AceHardware Locator有一個內置在具有過濾標記匹配此功能的方法，或者你會建議作爲一種方式來做到這一點？

請注意：我想避免使用任何數據庫僅僅是因爲沒有必要對數據庫其他地方上這個網站，它似乎浪費的只是此功能運行MySQL。我寧願避免長時間存放。 LAT。在一個文件中，但如果需要我可以這樣做。商店不會經常更改，我不需要使用GeoLocating獲取Lat。長。通過地址。

Jquery會默認加載，所以我想知道是否使用這個插件：http://googlemaps.mayzes.org/將被推薦或不。這是我的理解，他使用谷歌地圖V2和V3是更先進，更容易處理。

有我正在尋求將是有益的任何或全部功能的網站的任何例子/鏈接。

來源

2010-10-12 ParoX

這裏是由狀態存儲過濾的溶液。你將需要實現語言或其他過濾選項，但總體結構在那裏。基本思想是將所有存儲數據保存在一個數組中，並且如果標記映射不符合過濾標準，則簡單地將標記映射設置爲空。我爲狀態名稱使用了文本匹配 - 如果您希望真的很喜歡，您可以實現檢查是否在多邊形邊界發生了點擊。

我用jQuery來加載和處理狀態的XML數據（以及顯示商店列表），所以你需要確保你有存儲在同一臺服務器上的腳本上的數據。

<html> 
<head> 
    <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> 
    </script> 
    <script> 
     var map; 
     var stores; 
     var options = { 
      currState: "" 
     } 

     //sample stores data - marker Obj will store reference to marker object on the map for that store 
     stores = [{ 
      "name": "store1", 
      "lat": "37.9069", 
      "lng": "-122.0792", 
      "state": "California", 
      "languages": ["Spanish", "English"], 
      "markerObj": "" 
     }, { 
      "name": "store2", 
      "lat": "37.7703", 
      "lng": "-122.4212", 
      "state": "California", 
      "languages": ["English"], 
      "markerObj": "" 
     }, { 
      "name": "store3", 
      "lat": "39.251", 
      "lng": "-105.0051", 
      "state": "Colorado", 
      "markerObj": "" 
     }] 



     function init(){ 
      var latlng = new google.maps.LatLng(37.9069, -122.0792); 
      var myOptions = { 
       zoom: 4, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 
      showStates(); 
      showStores(); 
     } 


     function showStates(){ 
      //load the XML for state boundaries and attach events 
      $.get("states.xml", function(data){ 

       $(data).find("state").each(function(){ 

        coord = []; 
        state = $(this).attr("name"); 

        stateCol = $(this).attr("colour"); 
        $(this).find("point").each(function(){ 
         lat = $(this).attr("lat") 
         lng = $(this).attr("lng") 

         coord.push(new google.maps.LatLng(lat, lng)); 
        }) 

        //draw state poly 
        statePoly = new google.maps.Polygon({ 
         paths: coord, 
         strokeColor: "#000000", 
         strokeOpacity: 0.8, 
         strokeWeight: 1, 
         fillColor: stateCol, 
         fillOpacity: 0.5 
        }); 

        statePoly.setMap(map); 
        //attach click events to a poly 
        addListeners(state, statePoly, coord); 


        //attach click events to poly 
       }) 
      }) 

     } 

     function addListeners(state, poly, coord){ 
      google.maps.event.addListener(poly, 'click', function(){ 

       //zoom in to state level 
       bounds = new google.maps.LatLngBounds(); 

       for (i = 0; i < coord.length; i++) { 
        bounds.extend(coord[i]) 


       } 
       map.fitBounds(bounds); 
       //do store display and filtering 
       filterStoresByState(state); 
      }); 
     } 

     function showStores(){ 
      for (i = 0; i < stores.length; i++) { 
       var myLatlng = new google.maps.LatLng(stores[i].lat, stores[i].lng); 
       marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map 



       }); 
       //store the marker object for later use 
       stores[i].markerObj = marker; 
       //generate a list of stores 
       $(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>") 
      } 
     } 

     //do the filtering - you will need to expand this if you want add additional filtering options 

     function filterStoresByState(state){ 

      $(".stores").html(""); 
      for (i = 0; i < stores.length; i++) { 
       if (stores[i].state != state) { 
        (stores[i].markerObj).setMap(null); 

       } 
       else { 

        (stores[i].markerObj).setMap(map) 
        $(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>") 
       } 
      } 






     } 
    </script> 
</head> 
<body onload="init()"> 
    <div id="map" style="width: 600px;height: 400px;"> 
    </div> 
    <div> 
     <ul class="stores"> 
     </ul> 
    </div> 
</body>

來源

2010-10-13 22:52:16 Michal

谷歌地圖：店鋪定位器

回答

相關問題