我想将聚类添加到我的标记中。问题是我如何将聚类代码添加到现有代码中而不会弄乱整个问题？如果没有，有没有更好的方法呢？
这是我在gMap3中的聚类代码：
$("#test").gmap3({
map:{
options: {
center:[46.578498,2.457275],
zoom: 5,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
},
marker: {
values: macDoList,
cluster:{
radius:100,
// This style will be used for clusters with more than 0 markers
0: {
content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
width: 53,
height: 52
},
// This style will be used for clusters with more than 20 markers
20: {
content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
width: 56,
height: 55
},
// This style will be used for clusters with more than 50 markers
50: {
content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
width: 66,
height: 65
}
},
options: {
icon: new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green.png")
},
events:{
mouseover: function(marker, event, context){
$(this).gmap3(
{clear:"overlay"},
{
overlay:{
latLng: marker.getPosition(),
options:{
content: "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
"<div class='bg'></div>" +
"<div class='text'>" + context.data.city + " (" + context.data.zip + ")</div>" +
"</div>" +
"<div class='arrow'></div>",
offset: {
x:-46,
y:-73
}
}
}
});
},
mouseout: function(){
$(this).gmap3({clear:"overlay"});
}
}
}
});
这是我现有的代码（script.php），其中上述代码应该附加到此代码中：
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(); jQuery(document).ready(function(){
//VAR SETUP
<?php
$mainZoom = get_theme_mod('themolitor_customizer_home_zoom');
$toggle = get_theme_mod('themolitor_customizer_mapstyle_onoff');
$sitePin = get_theme_mod('themolitor_customizer_pin');
$homeCat = get_option('themolitor_customizer_home_cat');
?>
jQuery('#footer').prepend('<div class="markerNav" title="<?php _e('Prev','themolitor');?>" id="prevMarker"><i class="fa fa-chevron-left"></i></div><div id="markers"></div><div class="markerNav" title="<?php _e('Next','themolitor');?>" id="nextMarker"><i class="fa fa-chevron-right"></i></div><?php if($toggle){ ?><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="<?php _e('Map Type','themolitor');?>" class="satellite"></div></div><?php } ?>');
jQuery('body').prepend("<div id='target'></div>");
jQuery("#gMap").addClass('activeMap').gmap3({
action: 'init',
onces: {
bounds_changed: function(){
var number = 0;
jQuery(this).gmap3({
action:'getBounds',
callback: function (){
<?php
$customList = new WP_Query();
$customList->query('showposts=5000&cat='.$homeCat);
if ($customList->have_posts()) : while ($customList->have_posts()) : $customList->the_post();
//VAR SETUP
$latitude = get_post_meta( $post->ID, 'themolitor_latitude', TRUE );
$longitude = get_post_meta( $post->ID, 'themolitor_longitude', TRUE );
$addrOne = get_post_meta( $post->ID, 'themolitor_address_one', TRUE );
$addrTwo = get_post_meta( $post->ID, 'themolitor_address_two', TRUE );
$pin = get_post_meta( $post->ID, 'themolitor_pin', TRUE );
$customLink = get_post_meta( $post->ID, 'themolitor_custom_link', TRUE );
//LEGACY SUPPORT
$data = get_post_meta( $post->ID, 'key', true );
if(isset($data['latitude'])){$oldLatitude = $data['latitude'];}
if(isset($data['longitude'])){$oldLongitude = $data['longitude'];}
if(isset($data['address_one'])){$oldAddrOne = $data['address_one'];}
if(isset($data['address_two'])){$oldAddrTwo = $data['address_two'];}
if(isset($data['pin'])){$oldPin = $data['pin'];}
//CHECK FOR LEGACY IF VARS EMPTY
if($latitude){} elseif(!empty($oldLatitude)){$latitude = $oldLatitude;}
if($longitude){} elseif(!empty($oldLongitude)){$longitude = $oldLongitude;}
if($addrOne){} elseif(!empty($oldAddrOne)){$addrOne = $oldAddrOne;}
if($addrTwo){} elseif(!empty($oldAddrTwo)){$addrTwo = $oldAddrTwo;}
if($pin){} elseif(!empty($oldPin)){$pin = $oldPin;} else {$pin = $sitePin;}
if($customLink){} else {$customLink = get_permalink();}
//GET LAT/LONG FROM ADDRESS
if (!$latitude && !$longitude && $addrOne && $addrTwo) {
$addrOneFix = str_replace(" ", "+", $addrOne);
$addrTwoFix = str_replace(" ", "+", $addrTwo);
$address = $addrOneFix.'+'.$addrTwoFix;
$geocode = file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$address.'&sensor=false');
$json = json_decode($geocode);
$latitude = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lat'};
$longitude = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lng'};
}
if($latitude && $longitude){
?>
add(jQuery(this), number += 1, "<?php the_title(); ?>", "<?php echo $customLink; ?>","<?php if($addrOne && $addrTwo){ echo $addrOne.'<br />'.$addrTwo; } ?>","<?php echo $latitude; ?>","<?php echo $longitude; ?>", '<?php the_post_thumbnail(); ?>','<?php echo $pin;?>');<?php } endwhile; else:?>
alert('<?php _e('You need to add posts to display on the map.','themolitor');?>');
<?php endif; ?>
}
});
}
}
},{
action: 'setOptions', args:[{
zoom:<?php echo $mainZoom;?>,
scrollwheel:true,
disableDefaultUI:false,
disableDoubleClickZoom:false,
draggable:true,
mapTypeControl:true,
mapTypeId:'roadmap',
mapTypeControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
panControl:false,
scaleControl:false,
streetViewControl:true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
zoomControl:true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_CENTER
}
}]
});
function add(jQuerythis, i, title, link, excerpt, lati, longi, img, pin){
jQuerythis.gmap3({
action : 'addMarker',
lat:lati,
lng:longi,
options: {icon: new google.maps.MarkerImage(pin)},
events:{
mouseover: function(marker){
jQuerythis.css({cursor:'pointer'});
jQuery('#markerTitle'+i+'').stop(true,true).fadeIn({ duration: 200, queue: false }).animate({bottom:"32px"},{duration:200,queue:false});
jQuery('.markerInfo').removeClass('activeInfo').hide();
jQuery('#markerInfo'+i+'').addClass('activeInfo').show();
jQuery('.marker').removeClass('activeMarker');
jQuery('#marker'+i+'').addClass('activeMarker');
},
mouseout: function(){
jQuerythis.css({cursor:'default'});
jQuery('#markerTitle'+i+'').stop(true,true).fadeOut(200,function(){jQuery(this).css({bottom:"0"})});
},
click: function(marker){window.location = link}
},
callback: function(marker){
var jQuerybutton = jQuery('<div id="marker'+i+'" class="marker"><div id="markerInfo'+i+'" class="markerInfo"><a class="imgLink" href="'+link+'">'+img+'</a><h2><a href="'+link+'">'+title+'</a></h2><p>'+excerpt+'</p><a class="markerLink" href="'+link+'"><?php _e('View Details','themolitor');?> →</a><div class="markerTotal">'+i+' / <span></span></div><div class="clear"></div></div></div>');
jQuerybutton.mouseover(function(){
jQuerythis.gmap3({
action:'panTo',
args:[marker.position]
});
jQuery("#target").stop(true,true).fadeIn(500).delay(500).fadeOut(500);
});
jQuery('#markers').append(jQuerybutton);
var numbers = jQuery(".markerInfo").length;
jQuery(".markerTotal span").html(numbers);
if(i == 1){
jQuery('.marker:first-child').addClass('activeMarker').mouseover();
}
jQuerythis.gmap3({
action:'addOverlay',
content: '<div id="markerTitle'+i+'" class="markerTitle">'+title+'</div>',
latLng: marker.getPosition()
});
}
});
}
});
//]]>
</script>
答案 0 :(得分：0)
我还想知道如何在不重写所有代码的情况下实现这一目标......