谷歌地图中的弹出式样

时间:2012-11-25 13:14:09

标签: google-maps

我使用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,但是如何......

帮我解决问题。

0 个答案:

没有答案