Question

我有标签的标签工作正常，但现在我想使用markerCluster来达到整洁的目的。我找到了tut for markerCluster，但代码对我不起作用。

我只是尝试实现最简单的例子，这似乎只需要添加1行：

var mc = new MarkerClusterer(map, markers, mcOptions);

我也添加了js脚本。

但是不起作用，标记会显示但不会聚集。

我认为也许我创建了markerwithlabel包含标签内容（与普通标记格式不同）以下是我在html中的js代码，这个html视图在rails视图中的ruby中

<!DOCTYPE html>
<html>
<head>
<%= include_gon %>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">
   .labelsn {
     color: green;
     background-color: transparent;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: left;
     width: 40px;
     white-space: nowrap;
   }

   .labelsv {
     color: blue;
     background-color: transparent;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 30px;
     white-space: nowrap;
   }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
 <script type="text/javascript" src="/assets/markerwithlabel.js"></script>
<script type="text/javascript" src="/assets/markerclusterer.js"></script>
 <script type="text/javascript">
   var iw=[];
   var alladdress=[];
   var allmarkers=[];
   function initMap() {

     var clatlng = new google.maps.LatLng(1.352083, 103.819836);
     var myOptions = {
         zoom: 12,
         center: clatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
      map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
     for(i=0;i<gon.astatic.length;i++){


       alladdress.push(new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]));
       if(i<gon.vnum){
       allmarkers[i] = new MarkerWithLabel({position: alladdress[i],icon:"/assets/green_MarkerV.png" ,title: gon.astatic[i][0],labelClass: "labelsv",labelContent: gon.astatic[i][3]});}
       else
       {
      allmarkers[i] = new MarkerWithLabel({position: alladdress[i],icon:"/assets/green_MarkerN.png" ,title: gon.astatic[i][0],labelClass: "labelsn",labelContent: gon.astatic[i][3]});
       }


       var mc=new MarkerClusterer(map,allmarkers); \\what I have added for cluster 
google.maps.event.addListener(map,'idle',function(){

mc.getTotalClusters();

})          
     }

   google.maps.event.addDomListenerOnce(window,'load',initialize);
   }


    var ajax_call = function() {

     $.ajax({
        type:"GET",
        url:"gmaps/test",
        dataType:"json",
        success: function(result){
        for(i=0;i<result.length;i++)
       {
       allmarkers[i].labelContent=result[i];
       allmarkers[i].label.setContent();
       }

        }})
   };
   var interval = 1000*60*5
   setInterval(ajax_call,interval);
 </script>
</head>

<body onload="initMap()">
<div id="map_canvas" style="width: 945px; height: 700px;"></div>
</body>
</html>

之前是否有人处理此事？提前感谢。

Answer 1

通过使用MarkerClustererPlus（以前版本的较新版本），我能够使其工作的唯一方法。 https://github.com/mahnunchik/markerclustererplus

MarkerCluster如何与MarkerWithlabel一起使用

1 个答案: