3

Google マップでカスタム情報ウィンドウを作成しようとしています。インターネットで特定のコードを見つけましたが、既定のライブラリにこれを行うための事前定義されたコードが含まれているかどうかを確認したいと思います。

 var infowindow = new google.maps.InfoWindow();
             google.maps.event.addListener(infowindow, 'domready', function () {
                 var l = $('#hook').parent().parent().parent().siblings();
                 for (var i = 0; i < l.length; i++) {
                     if ($(l[i]).css('z-index') == 'auto') {
                         $(l[i]).css('border-radius', '16px 16px 16px 16px');

                     }
                 }
             });

          var point = new google.maps.LatLng(long, lat);
                 var marker = new google.maps.Marker({ 'position': point, 'map': map });

                 google.maps.event.addListener(marker, 'mouseover', (function (marker, iLoop) {
                     return function () {
                         infowindow.setContent("<p id='hook'>" + d + "</p>");
                         infowindow.open(map, marker);
                     }
                 })(marker, iLoop));

基本的に私がやっていることは、ポップアップに到達するためにすべての親を通過することです.他の方法はありますか?

4

2 に答える 2

6

情報ウィンドウのスタイリングはできません。infowindow を使用する場合、スタイルを設定できるのは、内部のタグにスタイルを指定して内部に配置したコンテンツだけです。infowindow の代わりに infobox を使用する必要があります。これは、使用可能な属性に値を指定してスタイルを設定できるコンポーネントです。次のコードは例です

var marker = new google.maps.Marker({
         map: theMap,
         draggable: true,
         position: new google.maps.LatLng(49.47216, -123.76307),
         visible: true
        });

        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "280px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
        ib.open(theMap, marker);

詳細はこちら

于 2013-07-06T13:21:50.553 に答える