Google지도를 렌더링 할 때 Mapclusterer가 실패합니다.

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); 

은 같은 오류를 가진 사람을 도움이되기를 바랍니다!