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

问题描述

今天，我想使用google maps'api做一个商店定位器。
商店定位器应如此设置：
两个区域，一个带有包含给定区域中的所有商店的地图（从中心点以可选择的半径测量），一个区域地图上所有商店的列表，他们的信息，当然还有他们网站的链接。当用户点击商店列表上的商店名称时，它会以地图中的商店为中心，并在商店标记上方打开一个infoWindow。

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 函数绑定到onclick


3. centerOnStore 当在列表区域中单击商店列表项时，此功能中心位于已在地图区域中点击的商店。


4. placeMarker 在地图上放置标记的函数，调用一次geocoder传回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屋！