javascript - 谷歌地图 API : Create a store locator

Question

今天我正在尝试使用谷歌地图的 api 制作商店定位器。商店定位器将像这样设置:两个区域，一个 map 包含给定区域中的所有商店(从中心点以可选半径测量)，另一个区域包含 map 上所有商店的列表、它们的信息，当然还有指向的链接他们的网站。当用户点击商店列表中的商店名称时，它会以 map 中的商店为中心，并在商店标记上方打开一个信息窗口。

我有一个 javascript 变量，我煞费苦心地从 php 脚本中分配了一些 json 数据(从数据库中动态选择这些数据)

locations = [{"siteurl":"http:\/\/localhost.localdomain\/5","address":"260 Test St","city":"Brooklyn","state":"New York","zip_code":"11206"},{"siteurl":"http:\/\/localhost.localdomain\/4","address":"3709 Testing St.","city":"Austin","state":"Texas","zip_code":"78705"}]; 

现在，我知道我需要运行 5 个不同的函数，下面列出了它们的明显用途:

1. geocoder.getLocations :用于转换地址数据(来自json对象)转换为纬度和经度数据对象
2. addElementToList :用于添加地址信息商店列表，并绑定(bind)centerOnStore onclick 函数
3. centerOnStore 当在列表区域中点击商店列表项时，该功能中心位于 map 区域中被点击的商店上。此函数还会在以商店为中心的上方打开一个信息窗口。
4. placeMarker 在 map 上放置标记的函数，一旦地理编码器返回 latitudeLongitude 对象就会调用
5. eventListener 它以某种方式与列表项的点击联系在一起，它进一步将 map 集中在相关商店上

好吧，我似乎不在我的行列中。我刚刚学习javascript闭包，我认为这些可能是必要的，但我不太理解它们。我需要想出一些方法让所有这些功能进入工作顺序，相互来回传递信息，并创建一个商店定位器

.

---

这是我到目前为止所得到的，但它有一些非常错误的地方。

    var map = null;
    var geocoder = null;
    var locations = null;
    var center_on = null;
    var zoom_level = null;
    var markerList = [];

    function initialize()
    {
            if(GBrowserIsCompatible())
            {
                    // Assign vars
                    map = new GMap2(document.getElementById("map_canvas"));
                    geocoder = new GClientGeocoder();
                    locations = <?php echo(json_encode($my_vars['locations'])); ?>;
                    center_on = "<?php echo($my_vars['center_on']); ?>";
                    zoom_level = <?php echo($my_vars['zoom_level']); ?>;
                    var currentLocation = 0;

                    geocoder.getLatLng(center_on, function(myPoint)
                    {
                            map.setCenter(myPoint, zoom_level);
                    });
                    map.setUIToDefault();


                    var list = document.getElementById('center_list');

                    for(var i = 0; i < locations.length; i++)
                    {
                            var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
                            geocoder.getLocations(address, addAddressToMap);
                    }

            }




            function addAddressToMap(response) {

                    if (!response || response.Status.code != 200) {
                            currentLocation++;
                    } else {
                    var place = response.Placemark[0];
                    var point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
                    marker = new GMarker(point);
                    GEvent.addListener(marker, 'click', function(){
                            this.openInfoWindowHtml("<strong>" + place.address + "</strong><br /><a href='" + locations[currentLocation]['siteurl'] + "'>" + locations[currentLocation]['siteurl'] + "</a>");
                    });
                    map.setCenter(point, 13);
                    markerList.push(marker);
                    map.addOverlay(marker);
                    li = document.createElement('li');

                    li.innerHTML = "<strong>" + place.address + "</strong>";
                    li.setAttribute('onclick', 'center_on_center(' + place.Point.coordinates[1] + ',' + place.Point.coordinates[0] + ')');
                    li.setAttribute('id', 'center_');
                    li.style.fontSize = '1.4em';
                    document.getElementById('center_list').appendChild(li);
                    // alert(currentLocation) here says 0,0,0,0
                    currentLocation++;
                    // alert(currentLocation) here says 1,2,3,4
                    }
            }
    }

我很抱歉代码墙。我不能再想了。我不知道这会如此困难。完全不知道。

如果我在递增之前在行中提醒 currentLocation，它始终为 0。但是如果我在递增之后在行中提醒它，它是“1,2,3,4”等。这与我所知道的一切背道而驰关于计算机。

Answer 1

暂时忘掉闭包。一旦你获得了一个可用的应用程序，你就可以深入研究这些内容。我认为此时您的目标应该是获得能够实现您想要的东西。

对我来说，您似乎唯一缺少的是 callback function 的想法。 .例如，addElementToList 将作为回调参数传递给 geocoder.getLocaitons .它的工作方式是当 getLocations() 完成时，它调用 addElementToList 并将 getLocations() 的结果作为参数提供给 addElementToList。然后，addElementToList 的代码会将您的商店位置作为标记添加到 map 中，并使用商店名称或地址或其他内容将新元素添加到您的 html 列表中。

查看此博客文章以获取使用回调的简单示例:Introducing Google's Geocoding Service .

最后一部分以特定商店为中心，可以(如您所建议的那样)使用事件监听器来完成。您可以设置一个监听器来点击标记，也可以点击您的列表。添加标记时，you can also add an event listener on it .如果您可以为 map 上的所有标记设置一个监听器，那就太好了，但我对谷歌的 API 不够熟悉，不知道这是否可行。