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

Question

我使用 google maps API 在地图上显示标记。

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

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

我使用文本输入让用户输入城市，并使用 jquery 处理附近提交按钮上的点击事件。然后我将查询发送到 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 值来使地图居中。 然后我将 shop 数组发送到 paintShops(shops) 方法：

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

我的问题在上面sn-p的最后一行：当我点击标记时，displayShopTooltip的参数tel和address是未定义的。 我想知道该怎么做才能没有这个问题，或者另一种方法。 提前致谢。

Answer 1

您遇到的问题是，通过在侦听器中声明 tel 和 address，您将在事件处理程序回调中将它们设置为未定义（因为没有传递任意参数的机制）。解决方案是确保处理程序与标记在同一范围内（即包装在函数中）。我建议阅读有关 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 2

您已将 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 3

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