2015-09-06 166 views
-2

有什么方法可以将我们自制的图标用于集群,而不是图库中的图标? 这是我的代码,没有样式选项的页面工作正常,但与样式选项地图不随标记Google Maps Api v3,自制集群图标

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' 
}]); 
+1

你有什么试过的?请学习[如何制作最小化,完整且可验证的示例。](http://stackoverflow.com/help/mcve) –

回答

0

是其余加载,根据文档: 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' 
    }] 
}); 
+0

当我使用样式选项时,我的地图不会与其他标记一起加载,但没有样式选项相同的代码完美地工作。 –