谷歌地圖API中的WordPress query_posts javascript（多個標記）

Question

在Google Maps JavaScript API中，是否可以查詢所有WordPress帖子的緯度和經度位置作爲自定義字段存儲，以在同一地圖上顯示所有標記？

var locations = [ 
<?php query_posts('post_type=property&showposts=9999999');?> 
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?> 
['<?php the_title(); ?>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>, <?php the_ID(); ?>], 
<?php endwhile; else: ?> 
<?php endif; ?> 
]; 

我嘗試這樣做，但在加載時的初始托架[後它切斷。

Answer 1

我做了類似的事情here。我的方法是使用WordPress wp_localize_script函數來生成參數，我認爲這將是您的最佳選擇。

我沒有時間現在拉出代碼，但如果您需要更多，我可以稍後再看。

編輯

好了，在這裏你去。這些都是基於上面的鏈接，所以它可能會有比你需要的更多的代碼，但它應該可以做到。

首先，我創建了一個名爲property的自定義帖子類型來匹配您的代碼，並創建了幾個屬性，給出每個屬性的緯度和經度。

接下來，我創建了一個名爲so.maps.js文件，有如下內容（bounds代碼只是爲了確保在地圖上顯示我的所有標記;你可能不會需要它）：

(function($) { 
    function initialise_map() { 
     var locations_str = php_args.locations.replace(/"/g, '"'); 
     var locations = $.parseJSON(locations_str); 

     var latlng = new google.maps.LatLng(48.856667, 2.350833); 
     var myOptions = { 
      zoom: 2, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var bounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < locations.length; i++) { 
      addMarker(locations[i], map, bounds); 
     } 

     if (locations.length > 1) { 
      map.fitBounds(bounds); 
     } 
    } 

    function addMarker(location, map, bounds) { 
     var locationLatLng = new google.maps.LatLng(location.latitude,location.longitude); 
     bounds.extend(locationLatLng); 
     var marker = new google.maps.Marker({ 
      position: locationLatLng, 
      map: map, 
      title:location.title 
     }); 
    } 

    $(function() { 
     initialise_map(); 
    }); 

})(jQuery); 

的重要組成部分，是php_args變量 - 這就是我前面提到的wp_localize_script調用的內容。

然後，我創建了一個頁面，顯示地圖，填充我想傳遞給JavaScript中的數組，並與wp_localize_script傳遞：

<?php 
/* 
    Template Name: Test Page 
*/ 

define('GOOGLE_MAPS_V3_API_KEY', 'xxxxx'); 

add_action('wp_enqueue_scripts', 'so_exhibitions_map_scripts'); 
function so_exhibitions_map_scripts() { 
    wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?hl=en&key=' . GOOGLE_MAPS_V3_API_KEY . '&sensor=false', false, '3'); 
    wp_enqueue_script('googlemaps'); 

    wp_register_script('so.maps', get_bloginfo('stylesheet_directory') . "/js/so.maps.js", array('jquery', 'googlemaps'), false, false); 
    wp_enqueue_script('so.maps'); 

    $locations = array(); 

    $location_query = new WP_Query(array(
     'post_type' => 'property', 
     'posts_per_page' => -1 
    )); 

    while ($location_query->have_posts()) { 
     $location_query->the_post(); 
     $locations[] = array(
      'title' => get_the_title(), 
      'latitude' => get_post_meta(get_the_ID(), 'latitude', true), 
      'longitude' => get_post_meta(get_the_ID(), 'longitude', true), 
      'id' => get_the_ID() 
     ); 
    } 

    wp_reset_postdata(); 

    wp_localize_script('so.maps', 'php_args', array(
     'locations' => json_encode($locations) 
    )); 
} 

get_header(); 
?> 
     <div id="container"> 
      <div id="content"> 
       <div id="map_canvas"></div> 
      </div><!-- #content --> 
     </div><!-- #container --> 
<?php 
get_footer(); 
?> 

最後，我確信地圖上是可見通過設置其大小在CSS：

#map_canvas { 
    width: 100%; 
    height: 452px; 
} 

希望有所幫助。我不是Google Maps API的專家，但是這對我來說確實有竅門。

Answer 2

感謝您的持續幫助！我們把你的代碼和我們以前的代碼結合起來，下面是我們最終用來使它正常工作的代碼。但是，如果您將帖子查詢提升到大於200個標記的數量，它似乎會超時。我不知道如何避免這種情況發生，因爲根據Google的說法，它們的結局沒有限制。 PHP/Apache的限制已經提出，但它沒有幫助。一位朋友建議它可能是一個javascript問題。如果任何人有進一步的建議允許更大的查詢，請評論。 :)

<div id="map" style="width:960px;height:1200px;"></div> 

<script type="text/javascript"> 
<?php 
$locations = array(); 
$location_query = new WP_Query(array(
'post_type' => 'property', 
'posts_per_page' => 100 
)); 
echo "//markers: 100\n"; 
echo "var locations = ["; 
$comma = ""; 
while ($location_query->have_posts()) { 
$location_query->the_post(); 
$title = str_replace("'", "\'", get_the_title()); 
echo $comma . "['" . $title . "', '" . get_post_meta(get_the_ID(), 'latitude', true) . "', '" . get_post_meta(get_the_ID(), 'longitude', true) . "', " . get_the_id() . "]"; 
$comma = ", "; 
} 
echo "];\n\n"; 
?> 

var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 7, 
center: new google.maps.LatLng(X.XXX, X.XXX), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
marker = new google.maps.Marker({ 
position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
map: map 
}); 

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
return function() { 
infowindow.setContent(locations[i][0]); 
infowindow.open(map, marker); 
} 
})(marker, i)); 
} 
</script>