【问题标题】:Position Gmaps infowindow in order to not make the map pan定位 Gmaps 信息窗口,以免地图平移
【发布时间】:2011-07-28 18:07:10
【问题描述】:


我想改变我的谷歌地图的当前行为,以便它在鼠标悬停时显示信息窗口并在点击时打开某个链接。显示 infowindow 不是问题,但现在的问题是如果 infowindow 不适合当前 div,mapcenter 会发生变化;这意味着标记位置将发生变化,不再是“鼠标悬停”,信息窗口消失。

我正在尝试创建类似的行为,例如:http://www.booking.com/city/nl/amsterdam.html?sid=de243c5062b6be49f9a67baa38992974;city=-2140479

恕我直言,我能想到两种解决方案;

  1. 计算标记的位置并据此定位信息窗口
  2. 在显示信息窗口时不允许地图更改位置,但这意味着信息窗口在某些情况下可能不可见,因此不理想。

在给定的示例中,他们不使用 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 google-maps-api-3 google-maps-markers


    【解决方案1】:

    是的,很可能只需向标记添加一个事件监听器:

     google.maps.event.addListener(marker, 'mouseover', function () {
           info.open(map, this.position);
     });
    

    以上来自我写的一个解决方案,但我想你得到了图片:) 只需使用标记位置(this.position)

    编辑:

    看了你的例子后,我突然想到你根本不需要信息窗口,你需要一个自定义叠加层,它本质上是一个带有坐标的 DOM 元素。

    Documentation

    【讨论】:

    • 不能在地图画布中定位信息窗口吗?就像说的那样,使用自定义叠加层会使其显示在画布之外,因此不可见。我的主要目标是在画布内显示信息窗口,而不改变画布内的地图,以便鼠标悬停在标记上。
    • 这是非常可行的,您可以将信息窗口放置在任何您想要的位置,但在提供的示例中,我很确定,他们没有使用信息窗口。我是你也可以在我的 ansver 中的 mouseevent 示例上添加一个根据鼠标定位的常规 dom 元素,然后在 mouseleave 上再次删除它
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-04-07
    • 2015-01-03
    • 2016-01-30
    • 1970-01-01
    • 2013-04-24
    • 2013-03-18
    • 2015-09-20
    相关资源
    最近更新 更多