谷歌地图：店铺定位器

我即将开始设计一家商店的商店定位器。我有几条关于最佳路线的问题。主要问题位于加粗。谷歌地图：店铺定位器

将有两列，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

谷歌地图：店铺定位器

回答

相关问题