0

地図上にいくつかの写真を表示するwordpress プラグインを開発しています。詳細情報はインフォボックス/インフォウィンドウに表示されます。

これは bing マップ 6.3 では問題なく機能し、インフォボックスはマップの境界線を超えています。

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

今は Google マップ 3 と Bing Maps 7 のサポートを追加したくありません。どちらの API もそのようなインフォボックスをサポートしていません。インフォボックス/インフォウィンドウはマップより大きくすることはできません。とにかく、どうすればそのようなインフォボックスを作成できますか?

4

1 に答える 1

1

コメントで説明されているように、マップ コントロール自体から 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-21T22:40:28.497 に答える