Question

我即将开始为企业设计商店定位器。关于最佳路线，我有几个问题。主要问题位于粗体。

将有两列，1列有地图本身，1列有当前位于地图视图中的所有商店列表。我希望能够将谷歌地图加载到美国地图上，并在其中有商店的州周围设置多边形。多边形不需要动态加载，可以从此列表中手动编辑：Geo Boundaries

您是否建议我使用哪种功能或方法，只需查看当前正在查看哪些标记，就可以动态地找出要显示在第二列中的标记/商店信息？例如，让我们说美国地图已加载，2个州有多边形（密歇根州和弗洛里亚）。每个密歇根和佛罗里达经销商都位于右侧。如果此人单击密歇根州的多边形，则地图将放大位于密歇根州的所有标记，并且仅使用密歇根标记更新该列。如果客户端再次放大到南密歇根州，则只会显示当前仍在视图中的标记。

我的第二个问题是，商店将拥有某些“属性”，我希望为地图提供某种过滤系统。可以说，如果他们说西班牙语，或者如果他们在维修中心，可以对商店进行分类。如果按下“仅讲西班牙语商店”的复选标记，那么所有不讲西班牙语的商店都将被卸载（或者只有西班牙语商店才会刷新）。非常类似于sprint的网站：Sprints Store Locator（但是，我正在寻找一个AJAX解决方案）编辑：更好的是ace硬件一：AceHardware Locator 是否有内置方法具有此功能过滤标记匹配，或者您建议采用什么方式？

请注意：我想避免使用任何数据库只是因为在这个网站上的任何其他地方都不需要数据库，而且仅仅为此功能运行MySQL似乎很浪费。我宁愿避免长时间存放。 LAT。在文件中，但如果需要，我可以这样做。商店不会经常更改，我也不需要使用GeoLocating来获得Lat。长。通过地址。

默认情况下会加载Jquery，所以我想知道是否建议使用此插件： http://googlemaps.mayzes.org/ 。我的理解是他使用谷歌地图v2，而且v3更先进，更容易处理。

具有我正在寻求的任何或所有功能的网站的任何示例/链接都会有所帮助。

Answer 1

以下是按州过滤商店的解决方案。您将需要实现语言或其他过滤选项，但一般结构就在那里。基本思想是将所有商店数据保存在一个数组中，如果它们不符合过滤条件，只需将标记映射设置为null。我使用了文本匹配的状态名称 - 如果你想真正想要的话，你可以实现检查是否在多边形边界发生了点击。

我使用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>

Google地图：商店定位器

1 个答案: