google maps V3 infoboxes -지도 테두리 확장?

지도에 일부 사진을 표시하는 wordpress plugin을 개발 중입니다. 자세한 정보는 infobox/infowindow에 표시됩니다.google maps V3 infoboxes -지도 테두리 확장?

bing 맵 6.3에서는 제대로 작동하지만 infoboxes는 맵의 테두리를지나칩니다.

예 :

http://www.denktfrei.de/?p=805는 지금은 구글이 3을 매핑하고 빙지도 (7) 두 API는 infoboxes를 지원하지 않습니다에 대한 지원을 추가 할 wan't의 인포 박스/정보창이지도보다 클 수 없습니다. 어쨌든 그런 infoboxes를 만들려면 어떻게해야합니까?

출처

2013-02-17 frest.de

. 이런 식으로, 당신은 infobox가 컨트롤에 'clipped'되지 않습니다. 두 API 모두에서 작동 할 수 있습니다. –

예, 작동합니다. 마커 DOM과 opentip-works를 사용합니다. ;) –

주석에서 설명한대로 맵 컨트롤 자체에서 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

위대한 작품, 감사합니다! –

google maps V3 infoboxes -지도 테두리 확장?

답변

관련 문제