Javascript 单张弹出循环

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

          // Loops through CPT and puts both city and name into array
          // TODO: Rename hometown to something more relevant
          while ($loop->have_posts()) : $loop->the_post();

            $post_meta = get_post_meta($post->ID, 'hometown', true);
            $title = get_the_title($post->ID);

            if ( !empty ( $post_meta ) || !empty ( $title ) ) {
            $hometown[] = array(
                'city' => $post_meta,
                'name' => $title
            );
        }
        endwhile;

    <script>
    var hometown = <?php echo wp_json_encode($hometown); ?>;
    var map = L.map('map').setView([40, 0], 2);

    L.mapbox.accessToken = 'myToken';

    var geocoder = L.mapbox.geocoder('mapbox.places');

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

   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=myToken', {
   maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);

function showLoc(err, data) {
L.marker([data.latlng[0], data.latlng[1]], 2)
    .bindPopup(hometown[0].name)
    .addTo ( map );
}
 </script>

//循环通过CPT并将city和name放入数组中
//TODO:将家乡重命名为更相关的名称
而（$loop->have_posts（））：$loop->the_post（）；
$post\u meta=get\u post\u meta（$post->ID，‘家乡’，true）；
$title=获取标题（$post->ID）；
如果（！empty（$post_meta）| |！empty（$title））{
$homitary[]=数组(
“城市”=>$post\u meta，
“名称”=>$title
);
}
结束时；
var=；
var map=L.map（'map'）.setView（[40,0]，2）；
L.mapbox.accessToken='myToken'；
var geocoder=L.mapbox.geocoder（'mapbox.places'）；
对于（变量i=0；i<0.length；i++）
{
地理编码器.query（家乡[i].城市，showLoc）；
}
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=myToken',{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒。街道”
}).addTo（地图）；
函数showLoc（错误、数据）{
L.标记（[data.latlng[0]，data.latlng[1]]，2）
.bindPopup（家乡[0]。名称）
.addTo（地图）；
}

例如，我们有以下数组：

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

当这些请求完成时，它将对每个查询执行

回调

方法：

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

问题是这些请求是错误的，我们无法确保它们将按照我们请求的顺序完成。因此，在

回调

方法中，我们无法直接知道结果来自哪个项：

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

幸运的是，

callback

方法提供的

data

对象在

data.results.query

属性中保存了原始查询：

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

这将把

['denver'，'colorado']

或

['houston'，'texas']]

记录到您的控制台，具体取决于它来自哪个查询。现在，您可以在

家庭
数组中搜索城市并返回名称：

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

        }
    }
}

函数回调（错误，数据）{
//加入查询数组，以便获得与查询相同的字符串
var city=data.results.query.join（'，'）；
//迭代homes数组
对于（变量i=0；i

对于您的解决方案，它将如下所示：

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

函数回调（错误，数据）{
var city=data.results.query.join（'，'）；
对于（变量i=0；i

您可以在这里尝试：（使用您自己的代币）

希望有帮助，祝你好运

注意：当你有两个名字是同一个城市的时候，你就会遇到麻烦，所以你最好确保所有的地址都是唯一的。
当城市由两个词组成时，我遇到了问题（例如纽约）。我修改了这句话，似乎有帮助<代码>var city=data.results.query.join（“”）
也在考虑使用正则表达式删除任何空白。现在我有点好奇，如果不止一个人来自同一个城市，我是否可以制作某种计数器，并在弹出窗口中使用它。谢谢这真的很有帮助。只是测试了一下，我知道，确实没有注意到。对“newyork，NY”的查询返回数组['New'，'York'，'NY']，而不是我所期望的['newyork'，'NY']。只要你知道发生了什么，你就能适应。如果我想处理每个城市的多个名字，我会做如下事情：
[{name:['John'，'Peter']，city:'Denver，Colorado'}，{name:['Jane'，'Anne']，city:'Houston Texas'}]
这样，每个城市都有一个标记，可以轻松返回属于该城市的所有名字。这似乎是一个好方法！我可能需要在PHP数组中正确使用它。这只是一个有趣的项目，我正在做，以显示员工来自何处，所以幸运的是，它不必是完美的。作为更新，我最终选择了Markercluster，当人们来自同一个地方时。正如你在这里看到的，它工作得很好。你必须点击“按家乡”
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);
        }
    }
}