admin管理员组

文章数量:1023081

My map is pretty sluggish due to the large amount of data/markers stored in locations so I tried to get markerclusterer working shown here. Locations is just a c# string array that has a name, latitude, and longitude for each marker. For some reason the map still works but just shows individual markers and does not cluster them and I cannot figure out why. Any help would be appreciated. 

<script type="text/javascript">

    var locations = [<%=locations%>];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(30.2979536, -97.7470835),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({position: new  google.maps.LatLng(locations[i][1], locations[i][2]), map: map });
        markers.push(marker);
    }

  var markerCluster = new MarkerClusterer(markers);
</script>

My map is pretty sluggish due to the large amount of data/markers stored in locations so I tried to get markerclusterer working shown here. Locations is just a c# string array that has a name, latitude, and longitude for each marker. For some reason the map still works but just shows individual markers and does not cluster them and I cannot figure out why. Any help would be appreciated. 

<script type="text/javascript">

    var locations = [<%=locations%>];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(30.2979536, -97.7470835),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({position: new  google.maps.LatLng(locations[i][1], locations[i][2]), map: map });
        markers.push(marker);
    }

  var markerCluster = new MarkerClusterer(markers);
</script>
  • javascript
  • asp
  • html
  • google-maps
  • google-maps-api-3
Share Improve this question edited Jan 5, 2013 at 21:37 Sealer_05 asked Jan 5, 2013 at 21:31 Sealer_05Sealer_05 5,5869 gold badges37 silver badges56 bronze badges 1
  • possible duplicate of stackoverflow./questions/5258553/… – geocodezip Commented Jan 5, 2013 at 22:54
Add a ment  | 

1 Answer 1

Reset to default 3

  • pass the map into the MarkerClusterer

      var markerCluster = new MarkerClusterer(map, markers);

proof of concept fiddle

You might want to convert the latitude and longitude to floating point numbers from strings (with parseFloat()).

working example with MarkerClusterer

code snippet:

var locations = [
  [0, 30.2979536, -97.7470835],
  [1, 30.29, -97.747],
  [2, 30.2979536, -97.7470835],
  [3, 30.2979536, -97.7470835]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(30.2979536, -97.7470835),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var markers = [];

for (var i = 0; i < locations.length; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  markers.push(marker);
}

var markerCluster = new MarkerClusterer(map,markers,{imagePath: 'https://cdn.jsdelivr/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m'}); // was 'https://developers.google./maps/documentation/javascript/examples/markerclusterer/m'
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis./maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- was https://developers.google./maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<script src="https://cdn.jsdelivr/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

My map is pretty sluggish due to the large amount of data/markers stored in locations so I tried to get markerclusterer working shown here. Locations is just a c# string array that has a name, latitude, and longitude for each marker. For some reason the map still works but just shows individual markers and does not cluster them and I cannot figure out why. Any help would be appreciated. 

<script type="text/javascript">

    var locations = [<%=locations%>];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(30.2979536, -97.7470835),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({position: new  google.maps.LatLng(locations[i][1], locations[i][2]), map: map });
        markers.push(marker);
    }

  var markerCluster = new MarkerClusterer(markers);
</script>

My map is pretty sluggish due to the large amount of data/markers stored in locations so I tried to get markerclusterer working shown here. Locations is just a c# string array that has a name, latitude, and longitude for each marker. For some reason the map still works but just shows individual markers and does not cluster them and I cannot figure out why. Any help would be appreciated. 

<script type="text/javascript">

    var locations = [<%=locations%>];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(30.2979536, -97.7470835),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({position: new  google.maps.LatLng(locations[i][1], locations[i][2]), map: map });
        markers.push(marker);
    }

  var markerCluster = new MarkerClusterer(markers);
</script>
  • javascript
  • asp
  • html
  • google-maps
  • google-maps-api-3
Share Improve this question edited Jan 5, 2013 at 21:37 Sealer_05 asked Jan 5, 2013 at 21:31 Sealer_05Sealer_05 5,5869 gold badges37 silver badges56 bronze badges 1
  • possible duplicate of stackoverflow./questions/5258553/… – geocodezip Commented Jan 5, 2013 at 22:54
Add a ment  | 

1 Answer 1

Reset to default 3

  • pass the map into the MarkerClusterer

      var markerCluster = new MarkerClusterer(map, markers);

proof of concept fiddle

You might want to convert the latitude and longitude to floating point numbers from strings (with parseFloat()).

working example with MarkerClusterer

code snippet:

var locations = [
  [0, 30.2979536, -97.7470835],
  [1, 30.29, -97.747],
  [2, 30.2979536, -97.7470835],
  [3, 30.2979536, -97.7470835]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(30.2979536, -97.7470835),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var markers = [];

for (var i = 0; i < locations.length; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  markers.push(marker);
}

var markerCluster = new MarkerClusterer(map,markers,{imagePath: 'https://cdn.jsdelivr/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m'}); // was 'https://developers.google./maps/documentation/javascript/examples/markerclusterer/m'
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis./maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- was https://developers.google./maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<script src="https://cdn.jsdelivr/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

本文标签： javascriptMarkerClusterer not clustering markersStack Overflow

版权声明：本文标题：javascript - MarkerClusterer not clustering markers - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745569103a2156627.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。