Question

除了库中的图标之外，我们有什么方法可以使用我们自制的群集图标？这是我的代码，如果没有样式选项，页面工作正常，但使用样式选项，地图不会与其他标记一起加载

  var longitude = position.coords.longitude;
  var latitude = position.coords.latitude;
  var latLong = new google.maps.LatLng(latitude, longitude);
  var locations = [
  ['Bondi Beach','<a href="story-detail.html">nepal</a>', 27.893, 85.667, 4],
  ['Coogee Beach','<a href="story-detail.html">nepal</a>', 27.883, 85.657, 5],
  ['Cronulla Beach', '<a href="story-detail.html">nepal</a>', 27.873, 85.647, 3],
  ['Manly Beach', '<a href="story-detail.html">nepal</a>',27.863, 85.637, 2],
  ['Maroubra Beach', '<a href="story-detail.html">nepal</a>',27.69, 85.427, 1]
];


var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: latLong,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI:true
});
var geomarker = new google.maps.Marker({
    position: latLong,
    map: map,
    title: 'your location',
    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
  });

var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(geomarker, 'click', (function(geomarker) {
    return function() {
      infowindow.setContent('You are here');
      infowindow.open(map, geomarker);
    }
  })(geomarker));

var markers=[], i;

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

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][2], locations[i][3])
    //map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][1]);
      infowindow.open(map, marker);
    }
  })(marker, i));

  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {
styles: [{
     url: '../img/logo.png'
 }, {
     url: '../imglogo.png'
 }, {
     url: '../img/logo.png'
 }]);

Answer 1

是的，根据文件： http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/docs/reference.html

MarkerClusterer构造函数采用MarkerClustererOptions对象，该对象可以包含包含图像URL的styles数组。实际示例中的文档有点缺乏证明，尽管如果更改群集样式，您可以在此处看到它：

https://googlemaps.github.io/js-marker-clusterer/examples/advanced_example.html

我认为你只需要做一些事情：

markerClusterer = new MarkerClusterer(map, markers, {
     styles: [{
         url: '../images/people35.png'
     }, {
         url: '../images/people45.png'
     }, {
         url: '../images/people55.png'
     }]
 });

Google Maps Api v3，自制群集图标

1 个答案: