Leaflet Popup Loop

Question

我最近一直在使用Leaflet並將其集成到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> 

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? 
} 

幸運的是由callback方法提供的data對象保存在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/（使用自己的代幣）

希望有幫助，祝你好運！

注意：只要您在同一城市有兩個名字，就會遇到麻煩，所以最好確保所有地址都是唯一的。