1


2

Googleマップ:店舗検索

私は、ビジネス用の店舗ロケーターの設計を開始しようとしています。 最適なルートについていくつか質問がありました。 主な質問は*太字*にあります。

2つの列があります。1つはマップ自体、1つは現在マップのビューにあるすべての店舗のリストです。 Googleマップをロードして、店舗がある州周辺のポリゴンを含む米国の地図にズームすることを望んでいます。 ポリゴンを動的にロードする必要はありません。次のリストから手動で編集できます:https://stackoverflow.com/questions/1814169/geographical-boundaries-of-states-provinces-google-maps-polygon[Geo境界]

*現在表示されているマーカーを確認するだけで、2列目に表示するマーカー/ストア情報を動的に把握するために使用することをお勧めする関数または方法はありますか?*たとえば、米国の地図が読み込まれているとします2つの州にはポリゴンがあります(ミシガン州とフロリア州)。 すべてのミシガンおよびフロリダのディーラーは右側にあります。 ユーザーがミシガン州のポリゴンをクリックすると、マップはミシガン州にあるすべてのマーカーでズームインされ、列はミシガン州のマーカーのみで更新されます。 クライアントがミシガン州南部に再びズームインすると、現在表示されているマーカーのみが列に表示されます。

私の2番目の質問は、店舗に特定の「プロパティ」を持たせて、マップに何らかのフィルタリングシステムを持たせたいということです。 スペイン語を話す店や修理センターがある店は分類できるとしましょう。 「スペイン語のみを話す店舗」のチェックマークを押すと、スペイン語を話さないすべての店舗がアンロードされます(またはスペイン語を話す店舗のみでリフレッシュされます)。 sprintのサイトに非常によく似ています:http://sprint.findlocation.com/results.aspx?addressline=detroit,%20mi&active=1&salesservices=1,2&services_matchall=true&type_OrExactMatch=COMPANY%20OWNED,EXCLUSIVE%20DEALER,AFFILIATE%20OWNED&selectionsearch=selectsearch=selectselecttype=checkselect= = R10 [* Sprints Store Locator (ただし、私はAJAXソリューションを探しています)編集:ACEハードウェアの方が優れています:] AceHardware Locator *マーカーの一致をフィルタリングするこの機能を持つ組み込みメソッドがありますか、またはこれを行う方法として何を提案しますか?

*注意:*このサイトの他の場所にデータベースは必要ないため、データベースの使用は避けたいと思います。この機能のためだけにMySQLを実行するのは無駄だと思われます。 長期保存は避けたいです。 lat. ファイルに含まれていますが、必要に応じて行うことができます。 店舗は頻繁に変更されることはなく、GatLocatingを使用してLatを取得する必要はありません。 長いです。 アドレス経由。

デフォルトでJqueryがロードされるため、このプラグインの使用をお勧めします:* http://googlemaps.mayzes.org/*が推奨されるかどうか。 彼はGoogleマップv2を使用しており、v3ははるかに高度で扱いやすいことを理解しています。

私が探している機能の一部またはすべてを備えたサイトの例/リンクは役に立ちます。

1 Answer


3


状態別にストアをフィルタリングするためのソリューションを次に示します。 言語またはその他のフィルタリングオプションを実装する必要がありますが、一般的な構造はそこにあります。 基本的な考え方は、すべてのストアデータを配列に保持し、フィルター条件を満たさないマーカーマップを単にnullに設定することです。 状態名にテキストマッチングを使用しました-本当に空想になりたい場合は、代わりにポリゴン境界でクリックが発生したかどうかのチェックを実装できます。

jQueryを使用して状態xmlデータをロードおよび処理し(ストアリストを表示)、スクリプトと同じサーバーにデータが保存されていることを確認する必要があります。

        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>")
                }
            }






        }