Question

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

 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));

基本上我正在做的是通过所有的父母来达到弹出窗口还有其他方式吗？

Answer 1

不可能为infowindow设置样式。使用infowindow时，你可以设计的唯一内容就是你通过在里面的标签中给出样式来放入内容。你必须使用信息框而不是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);

检查here for more

Answer 2

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的主要版本中可能有所不同。

当标记更改位置时，弹出窗口将自动获得左，顶部和 z-index 。

PS请勿使用有缺陷的信息框。它不是来自api。这是由弯曲的程序员写的第三方有缺陷的黑客。它“扩展”OverlayView

它直接使用许多私有变量和方法。你将在api的新主要版本中获得巨大的痛苦。
它强制您使用js中包含的固定html。
它强迫你在你的js中加入css。我笑着“boxStyle”，“closeBoxMargin”，“closeBoxURL”和其他人。

在谷歌地图中创建自定义信息窗口

2 个答案: