使用wp_query查找點時未在Google地圖上顯示的標記

Question

我使用WP Favorite Posts插件允許用戶在網站上選擇自己喜歡的旅行。這些帖子使用cookie保存到插件提供的已保存模板中。我編輯了此模板以包含地圖並從自定義元字段中拉出座標。

完整模板可在http://pastebin.com/zDrr5fPn找到。

我已經包括以顯示地圖中的代碼是：

<div id="map" style="width: 100%; height: 250px; position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div> 

，我使用的循環中的代碼是：

while ($loop->have_posts()) : $loop->the_post(); 
       if (get_post_meta($post->ID, 'custom_latlng', true) !== '') : ?> 
        <div style="display:block;"> 
         <script type="text/javascript"> 
          function initialize() { 
          //load map 
          map = new google.maps.Map(document.getElementById('map'), { 
            zoom: 9, 
            center: new google.maps.LatLng(53.3498, -6.2603), 
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            disableDefaultUI: true 
          }); 


          var savedMarkers = new Array(); 



          <?php $saved_pos = get_post_meta($post->ID, 'custom_latlng', true);?> 

           function addMarker() { 
            var savedMarker = new google.maps.Marker({ 
             map: map, 
             position: new google.maps.LatLng(<?php echo $saved_pos ?>), 
             icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', 
            }); 
           savedMarkers.push(savedMarker); 

           } 
           } 
         </script> 
        </div> 

此刻，當我查看源，我可以看到所選的點，座標確實出現。但是，它們不會出現在地圖上。就好像這些點出現在已保存的帖子列表中，但完全不在地圖上。

我希望這是有道理的。

乾杯

Answer 1

在循環中，僅填充緯度/經度數組，創建initialize循環外：

<div id="map" style="width: 100%; height: 250px;"></div> 

<script type="text/javascript"> 
    function initialize() { 
    //load map 
    map = new google.maps.Map(document.getElementById('map'), { 
           zoom: 9, 
           center: new google.maps.LatLng(53.3498, -6.2603), 
           mapTypeId: google.maps.MapTypeId.ROADMAP, 
           disableDefaultUI: true 
     }); 
    //create the markers 
    for(var i=0;i<savedMarkers.length;++i){ 
     savedMarkers[i] = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(savedMarkers[i][0], 
               savedMarkers[i][1]), 
      icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', 
      }); 
    } 
    } 

<?php 
    //create a php-array to store the latitudes and longitudes 
    $savedMarkers=array(); 
    //use the loop to populate the array 
    while ($loop->have_posts()) : $loop->the_post(); 
     if (get_post_meta($post->ID, 'custom_latlng', true) !== '') : 
     $savedMarkers[]=explode(',',get_post_meta($post->ID, 'custom_latlng', true)); 
     endif; 
    endwhile; 
?> 
//print the array as js-variable 
savedMarkers= <?php echo json_encode($savedMarkers);?>; 

</script> 

它沒有測試過，可能會有一些錯誤，但它應該是足以演示工作流程。

---

相關的評論： 要應用標題後的信息窗口，內容也存儲在savedMarkers項標題：

$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)), 
          array(get_the_title())); 

當您創建標記創建自定義物業爲您存儲infowindow內容的標記（我們稱之爲屬性content）：

//create the markers 
for(var i=0;i<savedMarkers.length;++i){ 
    savedMarkers[i] = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(savedMarkers[i][0], 
              savedMarkers[i][1]), 
     icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', 
      //the content(post-title) 
     content: savedMarkers[i][2] 
     }); 
} 

現在使用此內容的信息窗口內容：

google.maps.event.addListener(savedMarkers[i], 'click', function() { 
    infowindow.setContent(this.get('content')); 
    infowindow.open(this.getMap(), this); 
    } 
); 

---

您也可以創建信息窗口中的鏈接帖子：

$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)), 
          array(get_the_title(),get_permalink())); 

......

//create the markers 
for(var i=0;i<savedMarkers.length;++i){ 
    savedMarkers[i] = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(savedMarkers[i][0], 
              savedMarkers[i][1]), 
     icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', 
     //the content(post-title) 
     title: '' + savedMarkers[i][2], 
     //post-URL 
     href: savedMarkers[i][3] 
     }); 
} 

..........

google.maps.event.addListener(savedMarkers[i], 'click', function() { 
    var link=document.createElement('a'); 
    link.appendChild(document.createTextNode(this.get('title'))); 
    link.setAttribute('href',this.get('href')); 
    infowindow.setContent(link); 
    infowindow.open(this.getMap(), this); 
    } 
);