在谷歌地图上定位自定义标记

Question

在谷歌地图上定位自定义标记

javascriptgoogle-maps

4

我有一个谷歌地图测试应用程序：http://dev.driz.co.uk/googlemap/。正如您所看到的，我使用地理定位来显示您（用户）在地图上的位置，然后使用一些JSON数据来填充地图上的其他标记。

请注意：根据您所在的世界位置，您可能无法看到这些标记（它们在英国哈德斯菲尔德附近），如果您缩小地图，则应该看到它们。

我遇到了以下问题：

1. 所有标记都具有相同的标题，因此我认为在页面底部的for循环中某处犯了错误...不确定是什么错误？

2. 标记由于z-index和一些标记具有相同的坐标而出现各种重叠问题。是否可以使标记每次偏移几个像素以避免重叠，并且z-index自动递增，使它们比前一个标记更高？

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

3. 最后一件事情（也可能是最困难的）是当地图移动到标记右侧时，工具提示的位置不平均。有什么想法可以改善这种情况吗？它们在基于JSON的标记上变得更糟，并且滑出地图。

有人能帮我解决这些问题吗？

谢谢

- Cameron

必须评论一下，因为这些引脚距离我家大约有半英里！ - Stevo

尝试过了，但仍然得到相同的内容？ - Cameron

这篇文章有帮助吗？https://dev59.com/W17Va4cB1Zd3GeqPKX8D - Stevo

你能演示一下如何将它与我的循环一起使用吗？因为我不是很明白。谢谢。 - Cameron

我建议将您的帖子分成更具体的单个问题。不需要赏金。 - Marcelo

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stevo · Accepted Answer

我不知道这是否有效，但它遵循了我分享的那个链接的模式，也许可以尝试类似的方法...

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

...这是你的主要代码。我认为“item needs（项目需求）”需要在循环之外进行初始化（但我可能错了）

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

如果定位一直偏差，你可以对上方和左侧值应用更正，如果情况更复杂，你就需要改变算法。