谷歌地图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.

我要我曾不厌其烦地分配从PHP脚本一些JSON数据（这是从数据库中选择动态该数据）的JavaScript变量

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. 地理coder.getLocations ：用于
   转换从JSON地址数据（
   对象）进入的纬度和经度
   数据对象


2. addElementToList ：
   用于解决信息添加到
   商店的名单，并绑定
   centerOnStore 函数的onclick


3. centerOnStore 点击列表区一家商店列表项，此功能中心是在已被点击了地图区域的商店。该功能也打开上面的中心在店信息窗口。


4. placeMarker 来放置地图上的标记功能，调用一次地缘codeR返回latitudeLongitude对象


5. 事件监听这是在列表项的点击莫名其妙绑起来，它的进一步定心问题在店里地图

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

我为code的墙壁遗憾。我想不出了。我不知道这会是如此困难。没有主意。

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.

对我来说，它看起来像你错过了唯一的一块是回调函数的想法。相对=nofollow：比如，addElementToList将作为回调参数的地理coder.getLocaitons 。它的工作方式是，当的getLocations（1）完成后，它会调用addElementToList和提供的getLocations（）的结果作为参数传递给addElementToList。在code为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.

使用回调看看这篇博客文章的一个简单的例子谷歌的地理编码服务的。

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

最后一部分，在一个特定的存储中心，可以做（如你所说）与事件侦听器。您可以设置一个侦听器上的标记，也为你的清单上点击点击。当您添加一个标记，你也可以添加事件它监听的。这会是很好，如果你可以设置一个监听器在地图上的所有标记，但我不熟悉不够与谷歌的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.

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