Google Maps API:创建商店定位器 [英] Google Maps API: Create a store locator

问题描述

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

Today I am trying to make a store locator using google maps' api. The store locator is to be set up like so: two areas, one with a map containing all the stores in a given area (measured in a selectable radius from a center point), and one area with a list of all the stores on the map, their information, and of course a link to their website. When a person clicks on the name of the store on the store list, it centers upon the store in the map, and opens an infoWindow above the store marker.

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

I have a javascript variable to which I have taken pains to assign some json data from a php script (which is selecting this data on the fly from a database)

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 个不同的函数，下面列出了它们的明显用途:

Now, I know there are 5 different functions I need to run, listed below with their apparent use:

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

1. geocoder.getLocations : Used to convert address data (from the json object) into latitude and longitude data object
2. addElementToList : Used to add address information to the list of stores, and bind the centerOnStore function to onclick
3. centerOnStore when a store list item is clicked in the list area, this function center's upon the store that has been clicked on in the map area. This function also opens an infoWindow above the centered upon store.
4. placeMarker the function to place a marker on the map, called once the geocoder returns latitudeLongitude objects
5. eventListener this is tied up somehow in the clicking of a list item and it's further centering the map upon the store in question

嗯，我不喜欢它会出现.我刚刚在学习 javascript 闭包，我认为这些可能是必要的，但我不太理解它们.我需要想办法让所有这些功能进入工作状态，相互传递信息，并创建一个商店定位器

Well, i am out of my league it would appear. I am just now learning about javascript closures, and I think these may be necessary, but I can't quite understand them. I need to figure out some way to get all these functions into a working order, passing information back and forth to each other, and create a store locator

.

这是我目前得到的，但有一些非常错误的地方.

Here is what I've got so far, but there is something very wrong with it.

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

我为代码墙感到抱歉.我不能再想了.我不知道这会如此困难.完全没有想法.

I am sorry for the wall of code. I can't think anymore. I had no idea this would be so difficult. No idea at all.

如果我在增加它之前在行中提醒 currentLocation，它总是 0.但是如果我在增加它之后在行中提醒它，它是 '1,2,3,4' 等等.这与我所知道的一切背道而驰关于计算机.

if I alert currentLocation in the line before I increment it, it's always 0. but If I alert it in the line after I increment it, it's '1,2,3,4' etc. This goes against everything I know about computers.

推荐答案

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

Forget about closures for a moment. You can dive into those once you get a working app. I think you're goal at this point to should be to just get something that accomplishes what you want.

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

To me, it seems like the only piece you're missing is the idea of a callback function. For instance, addElementToList would be passed as the callback argument to geocoder.getLocaitons. The way it works is that when getLocations() finishes, it calls addElementToList and supplies the result from getLocations() as an argument to addElementToList. The code for addElementToList will then add your store location to the map as a marker and add a new element to your html list with the store's name or address or whatever.

查看此博客文章中使用回调的简单示例:介绍 Google 的地理编码服务.

Take a look at this blog post for a simple example using a callback: Introducing Google's Geocoding Service.

最后一部分以特定商店为中心，可以使用事件侦听器完成(如您所建议的那样).您可以为标记上的点击以及列表上的点击设置侦听器.添加标记时，您还可以在其上添加事件侦听器.如果您可以为地图上的所有标记设置一个侦听器就好了，但我对 google 的 API 不够熟悉，无法知道这是否可行.

The last part, centering on a specific store, can be done (as you suggested) with event listeners. You can set up a listener for clicks on the markers and also for clicks on your list. When you add a marker, you can also add an event listener on it. It'd be nice if you could set one listener for all markers on the map but I'm not familiar enough with google's API to know if this is possible.

这篇关于Google Maps API:创建商店定位器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！