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

我正在尝试在我的google地图中创建一个自定义信息窗口。我在internet上找到了一个特定的代码，但我想询问默认库是否包含用于执行此操作的预定义代码：

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

var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（infowindow，'domready'，函数（）{
var l=$（'#hook'）.parent（）.parent（）.parent（）.parent（）.sides（）；
对于（变量i=0；i”+d+”
”；
信息窗口。打开（地图、标记）；
}
})（标记，iLoop））；

---

基本上，我所做的是通过所有家长访问弹出窗口。还有其他方法吗？

无法设置信息窗口的样式。使用infowindow时，唯一可以设置样式的是通过在内部标记中提供样式而放入的内容。 您必须使用infobox而不是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);

var marker=new google.maps.marker({
地图：主题地图，
真的，
位置：新google.maps.LatLng（49.47216，-123.76307），
可见：正确
});
var-boxText=document.createElement（“div”）；
boxText.style.cssText=“边框：1px纯黑色；页边距顶部：8px；背景：黄色；填充：5px；”；
boxText.innerHTML=“加拿大不列颠哥伦比亚省第二市政厅”；
变量myOptions={
内容：boxText
，disableAutoPan:false
，最大宽度：0
，pixelOffset:new google.maps.Size（-140,0）
，zIndex:null
，boxStyle:{
背景：“url（'tipbox.gif'）不重复”
，不透明度：0.75
，宽度：“280px”
}
，closeBoxMargin:“10px 2px 2px 2px”
，closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif"
，infoBoxClearance:newgoogle.maps.Size（1,1）
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:false
};
var ib=新信息框（myOptions）；
ib.open（地图、标记）；

检查

var infowindow=new google.maps.infowindow({
内容：“”
});
google.maps.event.addListener（infowindow，“domready”，函数（）{
var popup=$（this.k.contentNode）.closest（“.gm-style-iw”）.parent（）
.empty（）.css({
宽度：“，
高度：“，
光标：“
})
.addClass（“弹出窗口”）；
});
google.maps.event.addListener（标记“单击”，函数（）{
打开（地图，这个）；
});

您可以更改

$（this.k.contentNode）.closest（“.gm-style iw”）.parent（）

以检测地图中的右块。这在谷歌地图api的主要版本中可能有所不同

当标记器改变位置时，弹出窗口将自动获得左、顶和z索引

PS请勿使用有缺陷的信息盒。它不是来自api。这是一个第三方有缺陷的黑客编写的欺诈代码。它“延伸”到视图上方

它直接使用许多私有变量和方法。在新的主要api版本中，您将面临巨大的困难

它强制您使用js中包含的固定html

它迫使您在js中包含css。我在笑“boxStyle”、“closeBoxMargin”、“closeBoxURL”等

---

我在点击任何标记后实现了自定义弹出窗口，我在我的一个项目中使用了ajax。你需要这样的东西吗？我在问我是否可以使用谷歌地图库来改变我的信息窗口，但是你能给我看一下你的代码吗？当然，这可能会有帮助，因为你必须通过黑客破解，但是没有简单且有文档记录的标准方法来完成。这就是创建信息框的原因。我不喜欢你的态度。如果你认为我错了，举个例子，礼貌一点。还有，这不是“我有缺陷的信息盒”，而是来自api。哦，这就是你的做法。很好，如果谷歌决定改变等级。gm风格的iw并成功。gm风格的iy你会被敬酒。我喜欢公平，所以我要说明为什么我投了反对票：1。这是一个黑客行为，如果谷歌在标记结构上有任何改变，这将成为垃圾。2.你没有解释为什么infobox有缺陷。对于puchu来说+1，因为infobox不是API的一部分，谷歌对标记结构或私有函数/变量的任何更改都会使你的作品也变成垃圾。由于更改一些CSS比更改JS更容易，puchu解决方案更干净。

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