个人中心
gpt4 book ai didi

javascript - 谷歌地图 : Store locator

转载 作者：行者123 更新时间：2023-11-30 13:37:50 27 4
gpt4 key购买 nike

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

将有两列，1 列是 map 本身，1 列是当前位于 map View 中的所有商店的列表。我希望将要加载的谷歌地图放大到美国 map 上，并在其中有商店的州周围使用多边形。多边形不需要动态加载，它们可以从这个列表中手动编辑:Geo Boundaries

有什么函数或方法可以推荐我使用，只需查看当前 View 中的哪些标记，即可动态确定要在第 2 列中显示哪些标记/商店信息？例如，假设美国 map 已加载，2 个州(密歇根州和弗洛里亚州)上有多边形。每个密歇根州和佛罗里达州的经销商都位于右侧。如果此人单击密歇根的多边形，则 map 将放大位于密歇根的所有标记，并且该列仅更新为密歇根标记。如果客户端再次放大到南密歇根州，则只有当前仍在 View 中的标记会显示在该列上。

我的第二个问题是，商店将具有某些“属性”，我希望为 map 提​​供某种过滤系统。可以说，如果商店说西类牙语，或者如果他们在维修中心，就可以对其进行分类。如果选中“只说西类牙语的商店”，那么所有不说西类牙语的商店都将被卸载(或者它会刷新只有说西类牙语的商店)。与 sprint 的网站非常相似:Sprints Store Locator (但是，我正在寻找 AJAX 解决方案)编辑:更好的是 ace 硬件:AceHardware Locator 是否有一种内置方法具有过滤标记匹配的功能，或者您建议采用什么方法来实现这一点？

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

Jquery 会默认加载所以我想知道是否使用这个插件: http://googlemaps.mayzes.org/ 是否推荐。据我了解，他使用的是 google maps v2，而 v3 更高级，更易于处理。

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

最佳答案

这是一个按州过滤商店的解决方案。您将需要实现语言或其他过滤选项，但通用结构就在那里。基本思想是将所有商店数据保存在一个数组中，如果不符合过滤条件，则只需将标记映射设置为 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>

关于javascript - 谷歌地图 : Store locator，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3915938/

27 4 0
文章推荐： javascript - 将 Google Analytics 添加到 Adob​​e Air HTML/Javascript 应用程序
文章推荐： c# - 为什么我在使用 IPv6 URI 时得到 'System.UriFormatException: Invalid URI: Invalid port specified.'？
文章推荐： c# - Deployment.Current.Dispatcher.BeginInvoke 如何在 Windows 应用商店应用程序中工作？
文章推荐： javascript - jQuery 选择器 - 如何根据多个条件选择元素，包括其 "next"元素的类型
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com