我正在努力将图标缩放级别更改功能应用于我的谷歌地图 api 脚本。
我当前的图标大小是 48px,实际图形也是 48px。
jsfiddle.net/motocomdigital/hQkb3/6
就这样下定了...
var image = new google.maps.MarkerImage(
'<?php bloginfo('template_url'); ?>/images/marker-images/image-48px.png',
new google.maps.Size(48,48),
new google.maps.Point(0,0),
new google.maps.Point(24,48)
);
我不认为可以根据 3 个缩放级别更改这些尺寸和图形吗?
例如,当变焦在...
缩放级别 0 > 6 - 使用...
'<?php bloginfo('template_url'); ?>/images/marker-images/image-12px.png',
new google.maps.Size(12,12),
new google.maps.Point(0,0),
new google.maps.Point(6,6)
缩放级别 6 > 8 - 使用...
'<?php bloginfo('template_url'); ?>/images/marker-images/image-24px.png',
new google.maps.Size(24,24),
new google.maps.Point(0,0),
new google.maps.Point(12,12)
缩放级别 8+ - 使用...
'<?php bloginfo('template_url'); ?>/images/marker-images/image-48px.png',
new google.maps.Size(48,48),
new google.maps.Point(0,0),
new google.maps.Point(24,24)
这是我下面的原始脚本...
jQuery(function($){
var image = new google.maps.MarkerImage(
'<?php bloginfo('template_url'); ?>/images/marker-images/image.png',
new google.maps.Size(48,48),
new google.maps.Point(0,0),
new google.maps.Point(24,24)
);
$('#map_div').gmap3({
action:'init',
options: {
center:[<?php echo $lt;?>,<?php echo $lo;?>],
zoom: 7,
scrollwheel: false
}
},
{
action: 'addMarkers',
markers: [ <?php echo $lat_long;?> ],
marker: {
options: {
draggable: false,
icon: image
},
events:{
mouseover: function(marker, event, data){
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({ action:'get', name:'infowindow' });
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(data);
} else {
$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
}
},
mouseout: function(){
var infowindow = $(this).gmap3({ action:'get', name:'infowindow' });
if (infowindow){
infowindow.close();
}
}
}
}
});
});
我真的不擅长这种级别的脚本,任何指针的想法或帮助都会非常感谢。
乔什