4

我有以下谷歌地图测试应用程序： http: //dev.driz.co.uk/googlemap/

如您所见，我使用地理位置来显示您（用户）在地图上的位置，然后使用一些 JSON 数据来使用其他标记填充地图。

注意：根据您在世界的哪个位置，您可能看不到图钉（它们位于英国哈德斯菲尔德附近），如果您缩小，您应该会看到它们。

我有以下问题：

1.）所有标记都有相同的标题，所以我假设在页面底部的 for 循环中的某个地方我犯了一个错误......但不确定是什么？

在下面的答案中修复。

2.)由于 z-index 以及一些标记具有相同的坐标，标记具有各种重叠问题。是否可以使标记在每个循环中偏移几个像素以使它们不重叠，并且每个循环的 z-index 会自动增加，因此它们高于前一个标记

需要这样做，以便当用户悬停标记时，它具有更高的 z-index 以使其位于顶部......如果这有意义吗？因此，在悬停事件中，我需要获取最新的偏移量，然后添加到它以使其最高！但是如何更改悬停时标记的 zindex？

3.) 最后一件事（可能也是最困难的）是，当移动地图时，工具提示在移动到标记的右侧时位置不均等。有什么想法可以改进吗？他们使用基于 JSON 的标记变得更糟，并从地图上滑落。

谁能帮我解决这些问题？

谢谢

4

1 回答 1

3

我不知道这是否可行，但它遵循我共享的链接的模式，也许是这样的......

    function doToolTip(item) {
        return function () {                        
                        mTooltip = new Tooltip('<span class="name">' + item.User.Profile.firstname + ' asked:</span> <span class="title">' + item.Post.title + '</span>');                  
                        mTooltip.open(this.getMap(), this); 
                    };
        }

...这是您的主要代码。我认为“项目需要”在循环范围之外初始化（但我可能错了）

    //other code etc...

var item;
    for (var i = 0; i < data.length; i++) {
        item = data[i];
        //other code etc....
        google.maps.event.addListener(marker, 'mouseover', doToolTip(item));
        //other code etc...
}

好的。我在这里猜测，因为我没有代码的本地副本，但是，看起来你需要在执行绘图功能时更改 z-index ......

    //code fragment...
    // need to force redraw otherwise it will decide to draw after we show the Tooltip                      
    $(this).css('z-index', 9999);
    this.draw();
// show tooltip

关于工具提示的位置，您将不得不尝试使用绘图功能，因为它似乎是根据标记计算位置。最好不要从谷歌地图坐标而是从页面上的实际位置来计算位置 - 我认为罪魁祸首是：

    pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
                // top offset
                top = pos.y - this.getAnchorHeight() / 2 - this.wdiv.outerHeight() / 2;
                // left offset
                if (this.getMap().getCenter().lng() > this.get('position').lng()) {
                    left = pos.x + this.wdiv.outerWidth();
                } else {
                    left = pos.x - this.wdiv.outerWidth();
                }
                // window position
                this.wdiv.css('top', top);
                this.wdiv.css('left', left);

如果定位始终处于关闭状态，您可以对顶部和左侧的值进行更正，如果更复杂，则必须更改算法。

于 2012-09-14T15:49:25.853 回答