3

我正在尝试在我的谷歌地图中创建一个自定义信息窗口我在互联网上找到了一个特定的代码，但我想问一下默认库是否包含一个预定义的代码来执行此操作：

 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 时，您唯一可以设置样式的是您通过在里面的标签中提供样式来放置的内容。您必须使用信息框而不是信息窗口。这是一个组件，您可以通过为可用属性赋予值来设置样式。下面的代码是一个例子

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 回答
0 
var infowindow = new google.maps.InfoWindow({
  content : "<div></div>"
});
google.maps.event.addListener(infowindow, "domready", function () {
  var popup = $(this.k.contentNode).closest(".gm-style-iw").parent()
    .empty().css({
      width  : "",
      height : "",
      cursor : ""
    })
    .addClass("popup");
});
google.maps.event.addListener(marker, "click", function () {
  infowindow.open(map, this);
});

您可以更改$(this.k.contentNode).closest(".gm-style-iw").parent()以检测地图中的正确块。这在谷歌地图 api 的主要版本中可能有所不同。

当marker改变位置时， Popup会自动获取left、top和z-index 。

PS 不要使用有缺陷的信息框。它不是来自api。这是由不正当的编码人员编写的第三方有缺陷的黑客攻击。它“扩展”了 OverlayView

  1. 它直接使用许多私有变量和方法。您将在新的主要版本的 api 中获得很大的痛苦。
  2. 它迫使您使用 js 中包含的固定 html。
  3. 它迫使您在 js 中包含 css。我在笑“boxStyle”、“closeBoxMargin”、“closeBoxURL”等。
于 2014-01-28T12:39:56.940 回答