谷歌地图V3信息框 - 扩大地图边界？

我正在开发一个wordpress plugin，它在地图上显示一些照片。详细信息显示在信息框/ infowindow中。谷歌地图V3信息框 - 扩大地图边界？

这适用于bing地图6.3，infoboxes会放弃地图的边界。

例子：http://www.denktfrei.de/?p=805

现在我wan't添加支持谷歌地图3和Bing地图7.两种API不支持这种InfoBoxes到，信息框/信息窗口不能超过地图大。无论如何，我怎样才能设法创建这样的信息框？

来源

2013-02-17 frest.de

什么，你可以很容易做的就是管理自己的信息框出来的地图控件，并设置基于页面上的相对位置的位置。通过这种方式，您的信息框将不会被“限制”到控件中。它可以在两个API上工作。 – 2013-02-17 13:52:43

是的，这应该工作。我使用标记DOM和opentip工作正常！ ;） – 2013-02-20 15:27:55

正如评论中所述，我会建议使用自定义信息框添加到地图控件本身的DOM。这样你就不会被限制在地图控件的DIV容器中。

请参见下面的代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> 
    </script> 
    <script type="text/javascript"> 
     var map = null; 

     function getMap() { 

      map = new Microsoft.Maps.Map(
       document.getElementById('myMap'), 
       { 
        credentials: 'YOURKEY', 
        showCopyright: false 
       }); 

      // Create the pushpin 
      var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75)); 

      // Add the pushpin to the map 
      map.entities.push(pushpin); 

      // Bind the click event on the pushpin 
      Microsoft.Maps.Events.addHandler(pushpin, 'click', function(e) { 
       if (e.targetType == 'pushpin') { 
        var box = document.getElementById('infobox'); 
        box.style.top = e.pageY + 'px'; 
        box.style.left = e.pageX + 'px'; 
        box.style.visibility = 'visible'; 
       } 
      }); 
     } 

    </script> 
</head> 
<body onload="getMap();"> 
    <div id="container" style="position:relative;"></div> 
    <div id="myMap" style="position: absolute;z-index:1; width: 800px; height: 600px;"> 
    </div> 
    <div id="infobox" style="float:left;z-index:2; visibility:hidden;position:absolute; width:500px; height: 300px; background-color:White; border: 1px solid #333;">Sample content for an infobox which should be larger than the map control.</div> 
</body> 
</html>

来源

2013-02-21 22:40:28

很好用，谢谢！ – 2013-02-26 23:02:28

谷歌地图V3信息框 - 扩大地图边界？

回答

相关问题