点击事件获取图钉数据答案

【问题标题】：Get data of pushpin on click event点击事件获取图钉数据
【发布时间】：2013-10-18 12:42:55
【问题描述】：

我正在开发烟草商店查找器 Windows 8.1 商店应用程序。主要思想是，当用户打开应用程序时，地图会放大到他的位置。该地图将烟草店显示为图钉。这些店铺的数据存储在一个json文件中，结构如下：

{
addr: Some street 12,
lng: longitude,
lat: lattitude,
open: {10:00-23:00, 20:00-22:00, and 5 more}
}

包含店铺地址、纵向位置、横向位置和营业时间。

这是我用来将图钉放置在地图上正确位置的 javascript 代码：

var pins = [];

  $.getJSON(dbURL, function (response) {
        pins = response;
        $.each(pins, function (i, item) {
            var _location = new Microsoft.Maps.Location(item.lat, item.lng);

            var pin = new Microsoft.Maps.Pushpin(_location, { description: i, icon: markerImgURL, height: markerImgHeight, width: markerImgWidth, draggable: false });
            Microsoft.Maps.Events.addHandler(pin, 'click', showDetails);

            map.entities.push(pin);
        });
    });

我为每个图钉添加了一个点击处理程序，因此当用户点击（或触摸）图钉时，会滑入一个包含详细信息的窗口。

这是我的showDetails() 函数：

function showDetails() {
    var details = $("#details");

    details.animate({
        "right": parseInt(details.css("right")) == 0
                ? -1 * details.innerWidth() - 5
                : 0
    }, 500)
}

我的问题是，我真的不知道如何通过此函数访问该单个引脚的数据。我添加了一个 id 作为 pin 的描述，这将引用保存完整数据的“pins”数组，但是如果我在 $.each() 循环中调用像 showDetails(i) 这样的函数，应用程序将冻结在启动时。

tl;dr：如何在不向函数传递 id 的情况下从外部函数访问图钉的描述属性？

谢谢！

【问题讨论】：

标签： javascript windows-8 bing-maps winjs windows-8.1

【解决方案1】：

您的showDetails() 事件处理程序将作为参数传递事件对象。如果您更新函数签名以接受此事件 arg，您可以访问目标对象，该对象将作为对图钉的引用。从那里您可以访问描述和其他属性

function showDetails(e) {
    var details = $("#details");    
    var smokeShop = e.target;

    WinJS.Utilities.setInnerHTML(details, smokeShop.description);

    details.animate({
        "right": parseInt(details.css("right")) == 0
                ? -1 * details.innerWidth() - 5
                : 0
    }, 500)
}

【讨论】：

完美，正是我需要的。谢谢！