我想改变我的谷歌地图的当前行为,使其在鼠标悬停时显示信息窗口,并在单击时打开某个链接。显示信息窗口不是问题,但现在的问题是,如果信息窗口不适合当前div,则mapcenter将发生更改;这意味着标记位置将发生变化,不再"鼠标悬停",信息窗口也将消失。
我正试图创造与上类似的行为,例如:http://www.booking.com/city/nl/amsterdam.html?sid=de243c5062b6be49f9a67baa38992974;城市=-2140479
imho我能想到两种解决方案;
- 计算标记的位置并在此基础上定位信息窗口
- 当信息窗口显示时,不让地图改变位置,但这意味着在某些情况下信息窗口可能不可见,因此并不理想
在给定的示例中,他们不使用google.maps.Marker((来添加标记,而是使用自己的代码添加div。
createMarker: function (d, g, n, l, e, m) {
var i = this.b_map_icons[e];
var b = (i.height) ? i.height : 20;
var h = (i.width) ? i.width : 17;
var f = i.iconAnchor[0];
var a = (i.zOrder) ? i.zOrder : 20;
var k = g - i.iconAnchor[1];
var o = (e == "cluster") ? '<div class="ml-text">' + m + "</div>" : "";
var c = "display:block;width:" + h + "px;height:" + b + "px;left:" + (d - f) + "px;top:" + k + "px;position:absolute;cursor:pointer;z-index:" + (a + 1) + ";";
var j = $('<div class="marker marker_type_' + e + '" id="' + n + '" style="' + c + '">' + o + '<img alt="' + l + '" src="' + i.image + '" style="position:absolute;top:0px;left:0px;z-index:12000;" /></div>');
return j
},
我最好根据标记的位置来定位信息窗口,这样它总是显示在当前地图中,这可能吗?
是的,只需在标记中添加一个事件侦听器:
google.maps.event.addListener(marker, 'mouseover', function () {
info.open(map, this.position);
});
以上是我写的一个解决方案,但我认为你得到了图片:(只使用标记位置(this.position(
编辑:
看了你的例子后,我突然想到你根本不需要信息窗口,你需要一个自定义的覆盖,它本质上是一个包含Coords的DOM元素
文档