设置缩放和居中以在单击群集时显示群集内的所有标记和群集

时间:2014-06-02 08:43:42

标签: google-maps google-maps-api-3 google-maps-markers markerclusterer jquery-gmap3

我正在使用地址绘制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 addressdataJSON.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"}]

0 个答案:

没有答案