Mapclusterer在渲染Google地图时失败

Question

我以前从地址字符串获取页面加载时的所有标记坐标，现在我知道这很糟糕。我重构了代码，它完美的工作，但clustermarkerer无法加载。

所有我的萤火得到是这样的：

TypeError: marker.getPosition is not a function 


return bounds.contains(marker.getPosition()); 

我一直想很多事情所以有可能是一个不必要的一行或两行。

 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
     @*<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>*@ 
     <script type="text/javascript"> 

var script = '<script type="text/javascript" src="../Scripts/markerclusterer'; 
      if (document.location.search.indexOf('compiled') !== -1) { 
       script += '_compiled'; 
      } 
      script += '.js"><' + '/script>'; 
      document.write(script); 
     </script> 
     <script> 

      var bounds = new google.maps.LatLngBounds(); 
      var latlng = new google.maps.LatLng(21.0000, 78.0000); 

      var map = new google.maps.Map(document.getElementById("map"), { 
       zoom: 5, 
       styles: [{ featureType: "landscape", stylers: [{ saturation: -100 }, { lightness: 65 }, { visibility: "on" }] }, { featureType: "poi", stylers: [{ saturation: -100 }, { lightness: 51 }, { visibility: "simplified" }] }, { featureType: "road.highway", stylers: [{ saturation: -100 }, { visibility: "simplified" }] }, { featureType: "road.arterial", stylers: [{ saturation: -100 }, { lightness: 30 }, { visibility: "on" }] }, { featureType: "road.local", stylers: [{ saturation: -100 }, { lightness: 40 }, { visibility: "on" }] }, { featureType: "transit", stylers: [{ saturation: -100 }, { visibility: "simplified" }] }, { featureType: "administrative.province", stylers: [{ visibility: "off" }]/**/ }, { featureType: "administrative.locality", stylers: [{ visibility: "off" }] }, { featureType: "administrative.neighborhood", stylers: [{ visibility: "on" }]/**/ }, { featureType: "water", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: -25 }, { saturation: -100 }] }, { featureType: "water", elementType: "geometry", stylers: [{ hue: "#ffff00" }, { lightness: -25 }, { saturation: -97 }] }], 
       center: new google.maps.LatLng(63.12816100000001, 17.643501000000015), 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       panControl: true, 
       panControlOptions: { 
        position: google.maps.ControlPosition.RIGHT_TOP 
       }, 
       zoomControl: true, 
       zoomControlOptions: { 
        style: google.maps.ZoomControlStyle.LARGE, 
        position: google.maps.ControlPosition.RIGHT_TOP 
       } 
      }); 

       var markers = []; 
      jQuery(function ($) { 

       var mcOptions = { 
        styles: [{ 
         height: 36, 
         url: "../images/music_rock.png", 
         width: 32, 
         textColor: "white", 
         textSize: 20, 

        }] 
       } 

       $.ajax({ 
        type: "GET", 
        datatype: 'json', 
        url: "/Handler/GetLocations.ashx", 
        data: "", 
        success: function (data) { 

         $(data).each(function (i) { 
          var loaction = [data[i].Address, data[i].Latitude, data[i].Langitude, data[i].index]; 
          markers.push(loaction); 
         }); 

         console.log(markers); 
         console.log(map); 
         console.log(mcOptions); 

         initializer(markers); 
         var markerCluster = new MarkerClusterer(map, markers, mcOptions); 

        }, 
        error: function (f, d, s) { 

        } 
       }); 

      }); 

      function initializer(locations) { 

       var infowindow = new google.maps.InfoWindow(); 

       for (i = 0; i < locations.length; i++) { 

         marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
         map: map, 
         animation: google.maps.Animation.DROP, 
         icon: "../images/musicMarker.png" 

         }); 

        google.maps.event.addListener(marker, 'click', (function (marker, i) { 
         return function() { 
          infowindow.setContent(locations[i][0]); 
          infowindow.open(map, marker); 

          var latlng = new google.maps.LatLng(21.0000, 78.0000); 
         } 

      //bounds.extend(marker.position); 
        })); 
       } 
      } 

     </script> 

Answer 1

简而言之，标记数组没有完全填充。我添加了tempMarkers来推送具有所需属性的标记。

    var tempMarkers = []; 
       for (i = 0; i < locations.length; i++) { 

        marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
         map: map, 
         animation: google.maps.Animation.DROP, 
         icon: "../images/musicMarker.png" 

        }); 
        tempMarkers.push(marker); 

       } 

然后阵列添加到聚类器：

markerClusterer = new MarkerClusterer(map, tempMarkers, mcOptions); 

希望它可以帮助别人用同样的错误！