我正在使用地址绘制Gmap3中地图内的标记而不是纬度和经度。如何在地图视图中使用所有标记和群集初始加载地图时,如何设置 最大缩放级别并设置中心 。此外,在单击群集时,我需要缩放并 仅显示 特定群集内的标记和子群集。我的地址数组如下所示
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type='text/javascript' src='gmap3.js'></script>
<script>
function initialize() {
$("#map").gmap3({
map:{
options:{
center: new google.maps.LatLng(<?php echo $result['latitude'];?>,<?php echo $result['longitude'];?>),zoomControlOptions: {
style:google.maps.ZoomControlStyle.LARGE
},
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
marker:{
values:addresstest,
events:{ // events trigged by markers
click: function(marker){
var map = $(this).gmap3("get");
var latitude = marker.position.k;
var longitude = marker.position.A;
map.setCenter( new google.maps.LatLng(latitude,longitude));
// alert("Here is the default click event");
}
},
options:{
icon: new google.maps.MarkerImage(
themeimageurl+"/magicshow.png",
new google.maps.Size(37, 37, "px", "px")
)
},
cluster:{
radius: 100,
events:{ // events trigged by clusters
mouseover: function(cluster){
$(cluster.main.getDOMElement()).css("border", "1px solid red");
},
mouseout: function(cluster){
$(cluster.main.getDOMElement()).css("border", "0px");
},click:function(cluster){
var map = $(this).gmap3("get");
map.setCenter(cluster.main.getPosition());
map.setZoom(map.getZoom() + 1);
}
},
0: {
content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
width: 53,
height: 52
},
10: {
content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
width: 56,
height: 55
},
20: {
content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
width: 66,
height: 65
}
}
}
});
}
initialize();
</script>
var addressdata
在JSON.parse
之后有以下数据。
[Object { address="Ann Arbor Area Conventi...MI 48104, Ann Arbor, MI", data="Cinetopia International Film Festival"}, Object { address="Livingston County Conve... 48139, Hamburg Twp, MI", data="Hamburg Family Fun Fest"}, Object { address="Riverside Park, 5 East ...MI 48197, Ypsilanti, MI", data="The Color Run Michigan Eastside"}, Object { address="Ann Arbor Area Conventi...MI 48109, Ann Arbor, MI", data="Ann Arbor Summer Festival"}, Object { address="University Center for t...MI 48104, Ann Arbor, MI", data="Parenting through Separation and Divorce"}, Object { address="Scarlett Middle School,...MI 48108, Ann Arbor, MI", data="Pickleball Mon /14 Drop-In"}, Object { address="Summit on the Park, 460...n, MI 48188, Canton, MI", data="Healthy U Pilates"}, Object { address="Washington Street Educa..., MI 48118, Chelsea, MI", data="Iddy Biddy Sports - Soccer"}, Object { address="Harlan Hatcher Graduate...MI 48109, Ann Arbor, MI", data="Engraved in Wood Exhibit: The Work of John DePol"}, Object { address="University of Michigan ...MI 48104, Ann Arbor, MI", data="Appropriation / Collabo...etcher and Miranda July"}, Object { address="University of Michigan ...MI 48104, Ann Arbor, MI", data="Changing Hands: Art Wit...Northeast and Southeast"}, Object { address="Chelsea Alehouse Brewer..., MI 48118, Chelsea, MI", data="Smartypants Trivia Smackdown"}, Object { address="Cobblestone Farm, 2781 ...MI 48108, Ann Arbor, MI", data="Cobblestone Farm Market"}, Object { address="VEO Art Studio, 114 Nor..., MI 48118, Chelsea, MI", data="Figure Drawing at VEO"}, Object { address="Harlan Hatcher Graduate...MI 48109, Ann Arbor, MI", data="Engraved in Wood Exhibit: The Work of John DePol"}, Object { address="University of Michigan ...MI 48104, Ann Arbor, MI", data="Appropriation / Collabo...etcher and Miranda July"}, Object { address="Chelsea Alehouse Brewer..., MI 48118, Chelsea, MI", data="Bluegrass and Roots"}, Object { address="South Ann Arbor St., Be...e, MI 48176, Saline, MI", data="Summer Music Series"}]