[英]Google Maps Marker Clusterer Not Working
我有一张包含5个标记的地图,其中4个在佛罗里达州的杰克逊维尔,另外1个在佛罗里达州的西棕榈滩。 我希望将4个标记聚集在初始化的缩放级别中。 当放大至杰克逊维尔的15级时,我希望该群集单独显示4个标记。
到目前为止,此代码不适用于我:
echo "
jQuery(document).ready(function($) {
var florida = new google.maps.LatLng(28.4811689,-81.36875);
var mapOptions = {
zoom: 6,
center: florida
}
var map = new google.maps.Map(document.getElementById('location_map_0'), mapOptions);
var marker_icon_for_sale = '".get_stylesheet_directory_uri()."/images/house-marker-for-sale.png';
var marker_icon_sold = '".get_stylesheet_directory_uri()."/images/house-marker-sold.png';
var marker_icon_hq = '".get_stylesheet_directory_uri()."/images/star-icon.png';
var infowindow;
var markers = [];
var geocoder = new google.maps.Geocoder();
";
$args = array(
'post_type' => 'project',
);
$query = new WP_Query( $args );
while($query->have_posts()) : $query->the_post();
if (has_post_thumbnail($post->ID)) {
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_object = get_post($thumbnail_id);
}
echo "
geocoder.geocode( { 'address': '".urlencode(get_the_title())."'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: '".get_the_title()."',
draggable: false,
icon: ".(get_post_meta($post->ID, 'hq') ? "marker_icon_hq" : (get_post_meta($post->ID, 'sold') ? "marker_icon_sold" : "marker_icon_for_sale"))."
});
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({
content: '".(has_post_thumbnail($post->ID) ? "<img width=\"100\" height=\"100\" src=\"".$thumbnail_object->guid."\" style=\"float: left;\">" : "")."<div style=\"width: 125px; padding: 5px; float: right;\"><b>Status:</b> ".(get_post_meta($post->ID, 'sold') ? 'Sold' : 'For Sale')."<br> ".get_the_title()."<br><a href=\"".get_permalink()."\">Project Info</a></div>'
});
infowindow.open(map, marker);
});
markers.push(marker);
}
});
";
endwhile;
echo "
var mcOptions = {gridSize: 20, maxZoom: 15};
var mc = new MarkerClusterer(map, markers, mcOptions);
});
";
当我检查调试器时,没有任何错误或警告。 为什么此代码不起作用?
地理编码器是异步的。 将标记数组加载到MarkerCluster中时,该数组为空,没有地理编码结果返回。 我建议您在地理编码调用之前初始化MarkerCluster,然后在回调函数运行时将每个标记添加到群集器中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.