我使用markerclusterer并且我显示类似的弹出信息:(在我的js文件中)
var infowindow = new google.maps.InfoWindow();
之后我使用:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
'<div id="wrapper">'+
'<div id="header">'+data.photos[i].owner_name+':</div>'+
'<div id="content">'+data.photos[i].photo_title+'</div>'+
'</div>'
);
infowindow.open(map, marker);
}
})(marker, i));
在这种情况下我只能自定义那些信息,我把它放在我的盒子里(infowindow.setContent)
但是如何自定义弹出窗口?如果我想在弹出窗口上设置一些border-radius ...
我看到了infobox插件,但我无法设置它(对于很多弹出窗口 - 在FOR cicle中)
$(function(){
function initialize() {
var styles = [[{
url: '../images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: '../images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: '../images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}]];
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ANDROID
},
scaleControl: true
});
var infowindow = new google.maps.InfoWindow();
var style = 0;
var mcOptions = {gridSize: 50, maxZoom: 9, styles: styles[style]};
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=00FF00,FF00FF,000000&ext=.png';
var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(24, 32));
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var title = data.photos[i].photo_title;
var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
title: title,
icon: markerImage
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
'<div id="wrapper">'+
'<div id="header">'+data.photos[i].owner_name+':</div>'+
'<div id="content">'+data.photos[i].photo_title+'</div>'+
'</div>'
);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
});
我知道我必须改变infowindow.setContent,但是如何......
帮我解决问题。