Question

我最近一直在玩Leaflet并将其集成到WordPress自定义帖子类型中。我在一个城市的自定义帖子类型中添加了一个字段。然后将其编码为JavaScript并发送到Mapbox以获取坐标。然后将坐标发送到显示标记的功能。那部分效果很好。我遇到的问题是让标题正确循环并显示在弹出对话框中。当我查看源代码时，我看到名称和城市都被正确编码。代码如下。谢谢！

A => (1 5)
B => ((1 5) 2 3)

Answer 1

例如，我们有以下数组：

var homes = [{
    name: 'Jane Doe',
    city: 'Denver, Colorado'
},{
    name: 'John Doe',
    city: 'Houston, Texas'
}];

我们将迭代数组的项目并从Mapbox的地理编码器服务查询每个城市属性：

for (var i = 0; i < homes.length; i++) {
    geocoder.query(homes[i].city, callback);
}

实际上，这将按此顺序执行以下操作：

geocoder.query('Denver, Colorado', callback);
geocoder.query('Houston, Texas', callback);

当这些请求完成后，它将为每个查询执行callback方法：

function callback (err, data) {
    // do stuff
}

问题是请求是asynchronous，我们无法确定它们是否会按照我们要求的顺序完成。因此，在callback方法中，我们无法直接知道结果来自哪个项目：

function callback (err, data) {
    // Who's data is this?
}

幸运的是，data方法提供的callback对象在data.results.query属性中保存了原始查询：

function callback (err, data) {
    console.log(data.results.query);
}

这会将['denver', 'colorado']或['houston', 'texas']记录到您的控制台，具体取决于它来自哪个查询。现在，您可以在homes数组中搜索该城市并返回名称：

function callback (err, data) {

    // join the query array so we get the same string as we've queried
    var city = data.results.query.join(', ');

    // iterate over the homes array
    for (var i = 0; i < homes.length; i++) {

        // compare cities in lowercase (result returns in lowercase)
        if (homes[i].city.toLowerCase() === city) {

            // found match, do stuff

        }
    }
}

对于您的解决方案，它看起来像这样：

function callback (err, data) {
    var city = data.results.query.join(', ');
    for (var i = 0; i < homes.length; i++) {
        if (homes[i].city.toLowerCase() === city) {
             new L.Marker([data.latlng[0], data.latlng[1]])
                 .bindPopup(homes[i].name)
                 .addTo(map);
        }
    }
}

你可以在这里试试：http://jsfiddle.net/73hg2L4y/（使用你自己的代币）

希望有所帮助，祝你好运！

注意：一旦你在同一个城市有两个名字，你就会遇到麻烦，所以最好确保所有地址都是唯一的。

单张弹出循环

1 个答案: