1

我使用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 ）

但是如何自定义弹出窗口？如果我想在我的弹出窗口上有一些边界半径......

我看到了 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，但是如何...

帮助我的PLZ。

4

0 回答 0