我使用了以下代码:http: //jsfiddle.net/ErYub/
但将其更改为从我的数据库中提取记录:
#{
(Datacentre.find(:all, :conditions => "longitude != false").map do |d|
"var latLng = new google.maps.LatLng(#{d.latitude}, #{d.longitude})
marker#{d.id} = new MarkerWithLabel({
position: latLng,
draggable: false,
map: map,
icon: {url:'/assets/icon_red.png'}
});
markers.push(marker#{d.id});
makeDiv(#{d.id}, 15, 'Marker #');
google.maps.event.addListener(markers[#{d.id}], 'click', function(e) {
infowindow.setContent('Marker postion: ' + this.getPosition());
infowindow.open(map, this);});
"end).join
}
var clusterOptions = { zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
globalMarker = markers.slice();
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
var markers = cluster.getMarkers();
var titles = "";
#{
(Datacentre.find(:all, :conditions => "longitude != false AND reference != ''").map do |d|
"titles = markers[#{d.id}].labelContent + "\n";
"end).join
}
浏览器中显示的代码看起来像我期望的那样,但只显示第一个标记并且没有出现信息框。
生成的代码
function initialize() {
var center = new google.maps.LatLng(45.4214, -75.6919);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var infowindow = new google.maps.InfoWindow();
var latLng = new google.maps.LatLng(50.72385, -1.90664)
marker1 = new MarkerWithLabel({
position: latLng,
draggable: false,
map: map,
icon: {url:'/assets/icon_red.png'}
});
markers.push(marker1);
makeDiv(1, 15, 'Marker #');
google.maps.event.addListener(markers[1], 'click', function(e) {
infowindow.setContent('Marker postion: ' + this.getPosition());
infowindow.open(map, this);});
var latLng = new google.maps.LatLng(52.04062, -0.75942)
marker6 = new MarkerWithLabel({
position: latLng,
draggable: false,
map: map,
icon: {url:'/assets/icon_red.png'}
});
markers.push(marker6);
makeDiv(6, 15, 'Marker #');
google.maps.event.addListener(markers[6], 'click', function(e) {
infowindow.setContent('Marker postion: ' + this.getPosition());
infowindow.open(map, this);});
ETC
var titles = "";
;
;
;
;
;
;
;
;
;