Google Maps: поиск магазина - PullRequest
Новая
       9

Google Maps: поиск магазина

1 голос
/ 12 октября 2010

Я собираюсь приступить к разработке локатора магазина для бизнеса. У меня было несколько вопросов о лучшем маршруте. Основные вопросы выделены жирным шрифтом .

Там будет два столбца, 1 с самой картой и 1 со списком всех магазинов, которые в данный момент находятся на виде карты. Я надеюсь, что загружаемая карта Google будет увеличена на карту США с полигонами вокруг штатов, в которых есть магазины. Полигоны не нужно загружать динамически, их можно редактировать вручную из этого списка: Границы гео

Есть ли какая-либо функция или метод, который вы бы порекомендовали использовать, чтобы динамически определить, какую информацию о маркере / хранилище отображать во 2-м столбце, просто посмотрев, какие маркеры в данный момент отображаются? Например, скажем, карта США загружена, в двух штатах есть полигоны (Мичиган и Флорида). Каждый дилер Мичиган и Флорида находится на правой стороне. Если человек щелкает по многоугольнику Мичигана, то карта увеличивается на всех маркерах, расположенных в Мичигане, и столбец обновляется только маркерами Мичигана. Если клиент снова увеличил масштаб изображения до южного Мичигана, в столбце отображаются только маркеры, которые еще видны в данный момент.

Мой второй вопрос, это то, что магазины будут иметь определенные «свойства», которые я хотел бы иметь какую-то систему фильтрации для карты. Допустим, магазины можно разделить на категории, если они говорят по-испански или если в них есть ремонтный центр. Если галочка нажата для «магазинов, говорящих только по-испански», то все магазины, которые не говорят по-испански, будут выгружены (или обновятся только в магазинах, говорящих по-испански). Очень похоже на сайт sprint: Sprinter Store Locator (однако, я ищу решение AJAX) Редактировать: лучше, чем аппаратное обеспечение ace: AceHardware Locator Есть ли встроенный метод, который имеет эту функцию фильтрации совпадений маркеров, или что бы вы предложили в качестве способа сделать это?

Обратите внимание: Я хотел бы избежать использования каких-либо баз данных просто потому, что в этом месте больше нет необходимости использовать какую-либо базу данных на этом сайте, и было бы неоправданно запускать MySQL просто для этой функции. Я бы предпочел избегать длительного хранения. широта в файле, но я могу сделать это при необходимости. Магазины будут меняться не часто, и мне не нужно использовать GeoLocating, чтобы получить лат. Долго. через адреса.

Jquery будет загружен по умолчанию, поэтому мне интересно, будет ли рекомендовано использование этого плагина: http://googlemaps.mayzes.org/ или нет. Насколько я понимаю, он использует google maps v2, а v3 гораздо более продвинутый и с ним легче иметь дело.

Были бы полезны любые примеры / ссылки сайтов, которые имеют какую-либо или все функции, которые я ищу.

1 Ответ

3 голосов
/ 14 октября 2010

Вот решение для фильтрации магазинов по состоянию.Вам нужно будет реализовать язык или другие параметры фильтрации, но общая структура есть.Основная идея заключается в том, что вы сохраняете все данные вашего хранилища в массиве и просто устанавливаете маркеры на нулевое значение, если они не соответствуют критериям фильтрации.Я использовал сопоставление текста для имени штата - если вы хотите быть действительно модным, вы можете вместо этого выполнить проверку, если щелчок произошел в границах многоугольника.

Я использовал 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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...