谷歌地图API:创建一个商店定位器(Google Maps API: Create a store

2019-08-03 01:42发布

今天,我试图让使用谷歌地图的API商店定位器。 商店定位器被设置像这样:两个区域,一个与包含在一个给定的区域(从中心点以可选择的半径处测量)中的所有商店的地图,并且与对所有的存储的列表中的一个区域地图,他们的信息,当然还有他们的网站的链接。 当一个人点击商店名单上的商店的名字,它在中心在地图上的商店,并打开商店标记上信息窗口。

我有一个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 :用于地址信息添加到存储列表,并结合centerOnStore功能的onclick
  3. centerOnStore当点击列表中的地区商店列表项,此功能中心时已被点击的地图区域的商店。 该功能也打开上述集中到商店信息窗口。
  4. placeMarker放置在地图上的标记,调用一次地理编码器的函数返回latitudeLongitude对象
  5. eventListener ,这是在列表项的点击莫名其妙绑起来,它的被讨论的存储器还定心地图

好吧,我是我配不上它会出现。 我刚才了解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:

忘记关闭了一会儿。 你可以潜入那些一旦你得到一个工作程序。 我觉得你在这一点上是目标应该是刚刚得到的东西,实现你想要什么。

对我来说,好像你就错过了唯一的一块是一个的想法回调函数 。 例如,addElementToList将作为回调参数传递geocoder.getLocaitons 。 它的工作方式是,当的getLocations()完成后,它会调用addElementToList和的getLocations提供()的结果作为参数传递给addElementToList。 然后addElementToList的代码将增加你的店的位置到地图作为标记,并添加了新的元素与商店的名称或地址,或任何你的HTML列表。

看看这个博客帖子使用回调一个简单的例子: 在介绍谷歌的地理编码服务 。

最后一部分,在一个特定的商店为中心,可以做(如你所说)与事件侦听器。 你可以建立一个监听器上的标记,也为你的清单上的点击次数。 当您添加标记, 也可以在其上添加事件侦听器 。 这会是很好,如果你可以设置一个监听地图上的所有标记,但我不熟悉足以与谷歌的API知道这是可能的。



Answer 2:

什么是你的信息来源? placeMarker肯定不会按门铃。 谷歌地图API参考(完整的例子!),请http://code.google.com/apis/maps/documentation/reference.html



Answer 3:

基于对@您的评论Rushyo的答案 - 好像你足够了解JavaScript和谷歌地图API来构建这些功能。 我为你找什么有点困惑。

不过我建议,你添加/纬度坐标,摆在首位数据库。 你不应该有充分的地图加载时间进行地理编码的地址。

更新:在回答下面的评论,这里是你引用的代码-与一起addAddressToMap()由地理编码调用的函数。 它为每个地址创建一个标记,并将其添加到阵列markerList 。 然后,您可以访问标记,阵列的后面,因为我们的范围之外初始化它addAddressToMap()函数。

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

var markerList = new array();

function addAddressToMap(response) {
    if (!response || response.Status.code != 200) {
        alert("\"" + address + "\" not found");
  } else {
      place = response.Placemark[0];
      point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
      marker = new GMarker(point);
      markerList.push(marker);
      map.addOverlay(marker);
  }
}

更新2:针对您在上面你的问题发布的代码,你可能得到的随机数currentLocation因为地理编码器的异步特性。 请记住,你getLocations()函数将数组中发送请求的每个位置它得到任何答复回来。



Answer 4:

我创建一个新的答案,因为我的其他的答案也越来越混乱。

为了得到正确关闭,你需要创建一个单独的功能,使地理编码请求。 下面的代码将允许你所需的信息窗口的文本到每个标记分配。

for(var i = 0; i < locations.length; i++) {
    var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
    var text = locations[i]['address']; // or whatever you want the text to be
    getLocation(address, text);
}

...

function getLocation(address, text) {
    geocoder.getLocations(address, function(response) {
        var place = response.Placemark[0];
        var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
        marker = new GMarker(point);
        marker.bindInfoWindowHtml(text); // note that if you want to use GEvent.addListener() instead - you'll need to create another function to get proper closure
        map.addOverlay(marker);
    });
}

有关在谷歌地图关闭更多信息,请参见以下问题:



文章来源: Google Maps API: Create a store locator