Question

我使用谷歌地图API在地图上显示标记。

每个标记指向地图上的商店。

我的问题是为每个标记创建事件处理程序，当点击给定标记时，将显示工具提示，其中包含有关商店的信息。

我使用文本输入让用户键入城市，并使用jquery我处理附近提交按钮上的click事件。然后我将查询发送到php站点，获取以下对象：

d: Object
error: false
lat: "52.3744440000"
lng: "9.7386110000"
shop: Array[2]
0: Object
address: "Addressstreet 12"
lat: "52.3761209000"
lng: "9.7387242000"
name: "Shop 1"
tel: "1234"
__proto__: Object
1: Object
length: 2
etc.

现在我使用lat和lng值作为城市的坐标来居中地图。然后我将商店阵列发送到paintShops（商店）方法：

function paintShops(shops){
for (var i = 0; i < shops.length; i++){
kl = shops[i];
var ka = parseFloat(kl.lat);
var kb = parseFloat(kl.lng);
tel = kl.tel;
address = kl.address;
var son = new google.maps.Marker({
position: new google.maps.LatLng(ka, kb),
map: map,
title: kl.name,
clickable: true
});
google.maps.event.addListener(son, 'click', function(son, tel, address) {
displayShopTooltip(son, tel, address);
}

我的问题出现在上面代码段的最后一行：当我点击标记时，displayShopTooltip的参数tel和地址是未定义的。我想知道怎么做没有这个问题，或者另一种方法。提前谢谢。

Answer 1

您已将tel和address定义为点击处理程序的参数，这没有意义。您可能想要访问全局变量：

google.maps.event.addListener(son, 'click', function(son) {
    displayShopTooltip(son, tel, address);
}

但是，这种方式只能有一个商店（只有一个全球tel和address）。改为使用局部变量和闭包：

function paintShops(shops) {
    for (var i = 0; i < shops.length; i++) {

        (function() {            
            var kl = shops[i];
            var ka = parseFloat(kl.lat);
            var kb = parseFloat(kl.lng);            
            var tel = kl.tel;
            var address = kl.address;

            var son = new google.maps.Marker({
                position: new google.maps.LatLng(ka, kb),
                map: map,
                title: kl.name,
                clickable: true
            });

            google.maps.event.addListener(son, 'click', function(son) {
                displayShopTooltip(son, tel, address);
            }
        })();
    }
}

Answer 2

你遇到的问题是，通过在侦听器中声明tel和address，你在事件处理程序回调中将它们设置为undefined（因为没有传递任意参数的机制）。解决方案是确保处理程序与标记在同一范围内（即包含在函数内）。我建议在javascript中阅读有关范围的内容，因为你做了一两个其他错误（例如，没有正确地声明变量） - javascript中的范围与其他编程语言的处理方式非常不同，并且需要一些习惯。

function paintShops(shops){
  for (var i = 0; i < shops.length; i++){
    makeMarker(shops[i]);
  }

  function makeMarker(kl) {
    var ka = parseFloat(kl.lat);
    var kb = parseFloat(kl.lng);
    var tel = kl.tel;
    var address = kl.address;
    var son = new google.maps.Marker({
       position: new google.maps.LatLng(ka, kb),
       map: map,
       title: kl.name,
       clickable: true
    });
     google.maps.event.addListener(son, 'click', function(son) {
       displayShopTooltip(son, tel, address);
     }
   }

Answer 3

$ .each（）函数与$（selector）.each（）不同，后者用于独占于jQuery对象进行迭代。 $ .each（）函数可用于迭代任何集合，无论它是地图（JavaScript对象）还是数组。在数组的情况下，回调每次都传递一个数组索引和相应的数组值。（也可以通过this关键字访问该值，但Javascript将始终将此值包装为Object，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，即迭代的对象。

迭代时如何将数组值设置为函数参数

3 个答案: