Javascript CSS谷歌地图自定义信息窗口_Javascript_Css_Google Maps

Javascript CSS谷歌地图自定义信息窗口

javascript css google-maps

Javascript CSS谷歌地图自定义信息窗口,javascript,css,google-maps,Javascript,Css,Google Maps,我一直在使用来自的代码，这是目前谷歌在地图API v3中创建自定义信息窗口的最佳示例。我一直在努力，到目前为止，我已经让它接近工作，除了一件事，它的div容器文本内容不会扩展到适合的内容，所以它只是下降，而不是扩大泡沫。如果我给内容容器一个固定的像素宽度，它可以正常工作，但是我不能让它根据其中的文本量来扩展这件事我已经讨论了一段时间了。任何帮助都将不胜感激这是HTML页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//

我一直在使用来自的代码，这是目前谷歌在地图API v3中创建自定义信息窗口的最佳示例。我一直在努力，到目前为止，我已经让它接近工作，除了一件事，它的div容器文本内容不会扩展到适合的内容，所以它只是下降，而不是扩大泡沫。如果我给内容容器一个固定的像素宽度，它可以正常工作，但是我不能让它根据其中的文本量来扩展

这件事我已经讨论了一段时间了。任何帮助都将不胜感激

这是HTML页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Gayborhood Map Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { width: 900px;
    height: 400px;
    margin: 200px auto 0 auto; }
</style>
<link rel="stylesheet" type="text/css" href="map.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="InfoBox.js"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(39.947137,-75.161824);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var gayborhood;

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var gayborhoodcoords = [
       new google.maps.LatLng(39.9492017, -75.1631272),
       new google.maps.LatLng(39.945423, -75.1639561),
       new google.maps.LatLng(39.9450064, -75.160579),
       new google.maps.LatLng(39.9487765, -75.1597468),
       new google.maps.LatLng(39.9492017, -75.1631272)
    ];

    gayborhood = new google.maps.Polygon({
       paths: gayborhoodcoords,
       strokeColor: "#00ff00",
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: "#00ff00",
       fillOpacity: 0.35
    });

    gayborhood.setMap(map);

    var image = 'red_icon.png';
    var myLatLng = new google.maps.LatLng(39.948883,-75.162246);
    var redMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
    });

   var contentString = '<h4>Woody\'s Bar</h4>';

   /*var infowindow = new google.maps.InfoWindow({
    content: contentString,
    disableAutoPan: true
   });*/

   google.maps.event.addListener(redMarker, 'mouseover', function() {
      var infoBox = new InfoBox({marker: redMarker, map: map});
   });
   /*google.maps.event.addListener(redMarker, 'mouseout', function() {
      infowindow.close();
   });*/
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

谢谢

我也面临同样的问题。对我来说，有效的方法是动态确定内容的维度，并正确设置信息框的高度和宽度。我遇到的问题是，在将内容插入DOM之前，它没有（正确的）维度值。因此，我的方法如下：

创建需要插入的DOM内容元素

将其插入临时容器中

获取临时容器的尺寸

拆下临时容器

在信息框中插入内容，并根据临时容器尺寸设置其高度和宽度

下面是使用jQuery框架完成的一个示例：

    var temp = $("<div class='temp'></div>").html(content).hide().appendTo("body");
    var dimentions = {
        width : temp.outerWidth(true),
        height : temp.outerHeight(true)
    };
    temp.remove();

    var overlayProjection = this.getProjection();
    var top_left = overlayProjection.fromLatLngToDivPixel(this.point_);        

    var dimensions= $.extend({}, dimensions, {
        y : top_left.y - dimensions.height,
        x : top_left.x - dimensions.width/2
    });

    var div = this.div_;
    $(div).css({
        "top": dimensions.y + 'px',
        "left" : dimensions.x + 'px',
        "width" : dimensions.width + 'px',
        "height" : dimensions.height + 'px'
    }).html(content);

var temp=$（“”）.html（content.hide（）.appendTo（“body”）；
变量维度={
宽度：室外温度宽度（真实值），
高度：温度外光（真）
};
移除温度（）；
var overlyprojection=this.getProjection（）；
var top_left=从LatlngToDivPixel（该点）的过度投影；
变量维度=$。扩展（{}，维度{
y：左上角。y-尺寸。高度，
x：左上角.x-尺寸.width/2
});
var div=this.div_2;；
$（div）.css({
“顶部”：尺寸y+px，
“左”：尺寸.x+‘px’，
“宽度”：尺寸。宽度+px，
“高度”：尺寸。高度+px
}).html（内容）；

希望有帮助

您可以覆盖“信息框绘制”方法，并在渲染后重新定位信息框：

var infobox = new InfoBox(myOptions);
infobox.initReady = false;
var oldDraw = infobox.draw;
infobox.draw = function() {
  oldDraw.apply(this);
  if( ! infobox.initReady) {

    // Calculate the required offset
    var offsetY = -($(infobox.div_).outerHeight());
    var offsetX = -110;
    infobox.initReady = true;

    // Set the new pixelOffset
    infobox.setOptions({
        pixelOffset: new google.maps.Size(offsetX, offsetY)
   });
  }
}

与此处讨论的问题非常相似：

    var temp = $("<div class='temp'></div>").html(content).hide().appendTo("body");
    var dimentions = {
        width : temp.outerWidth(true),
        height : temp.outerHeight(true)
    };
    temp.remove();

    var overlayProjection = this.getProjection();
    var top_left = overlayProjection.fromLatLngToDivPixel(this.point_);        

    var dimensions= $.extend({}, dimensions, {
        y : top_left.y - dimensions.height,
        x : top_left.x - dimensions.width/2
    });

    var div = this.div_;
    $(div).css({
        "top": dimensions.y + 'px',
        "left" : dimensions.x + 'px',
        "width" : dimensions.width + 'px',
        "height" : dimensions.height + 'px'
    }).html(content);

var infobox = new InfoBox(myOptions);
infobox.initReady = false;
var oldDraw = infobox.draw;
infobox.draw = function() {
  oldDraw.apply(this);
  if( ! infobox.initReady) {

    // Calculate the required offset
    var offsetY = -($(infobox.div_).outerHeight());
    var offsetX = -110;
    infobox.initReady = true;

    // Set the new pixelOffset
    infobox.setOptions({
        pixelOffset: new google.maps.Size(offsetX, offsetY)
   });
  }
}