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

Javascript 在谷歌地图上定位自定义标记,javascript,google-maps,Javascript,Google Maps,我有以下谷歌地图测试应用程序: 如您所见,我使用地理位置在地图上显示您(用户)的位置,然后使用一些JSON数据用其他标记填充地图 注意:根据你在世界上的位置,如果你缩小屏幕,你可能看不到这些大头针(它们在英国哈德斯菲尔德附近)。 我有以下问题: 1.)所有的标记都有相同的标题,所以我认为在页面底部的for循环中,我犯了一个错误。。。不知道怎么办 修正了下面的答案 2.)由于z指数以及一些标记具有相同的坐标,标记存在各种重叠问题。有没有可能使标记在每个循环中偏移一对像素,这样它们就不会重叠,并

我有以下谷歌地图测试应用程序:

如您所见,我使用地理位置在地图上显示您(用户)的位置,然后使用一些JSON数据用其他标记填充地图

注意:根据你在世界上的位置,如果你缩小屏幕,你可能看不到这些大头针(它们在英国哈德斯菲尔德附近)。

我有以下问题:


1.)所有的标记都有相同的标题,所以我认为在页面底部的for循环中,我犯了一个错误。。。不知道怎么办

修正了下面的答案


2.)由于z指数以及一些标记具有相同的坐标,标记存在各种重叠问题。有没有可能使标记在每个循环中偏移一对像素,这样它们就不会重叠,并且z索引在每个循环中自动增加,这样它们就比上一个标记高

需要使其在用户悬停标记时具有更高的z索引,以使其位于顶部。。。这有意义吗?因此,在悬停事件中,我需要获得最新的偏移量,然后将其添加到该偏移量中,使其达到最高!但是我如何改变悬停时标记的zindex呢


3.)最后一件事(可能是最困难的)是,当地图移动到标记右侧时,工具提示的位置不相等。有什么改进的办法吗?使用基于JSON的标记会变得更糟,并从地图上滑落


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


谢谢

我不知道这是否有效,但它遵循了我共享的链接模式,可能是这样的

    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); 
                    };
        }
关于工具提示的位置,您必须尝试使用draw函数,因为它似乎是从标记计算位置的。最好不是根据谷歌地图坐标,而是根据页面上的实际位置来确定位置——我认为罪魁祸首是:

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

如果定位一直处于关闭状态,您可以只对顶部和左侧的值进行校正,如果更复杂,您必须更改算法。

必须进行注释,因为针脚距离我家大约半英里!每次循环时,都会重新初始化工具提示-它会覆盖以前的值。因此,您总是以最后定义的注释结束(旧金山爵士乐)。可能在addListener事件中实例化工具提示?尝试过,但仍然得到相同的内容?哦,是的,它仍然将'item'的最后一个值绑定到事件。这篇文章有帮助吗?好的,这解决了问题1:)谢谢。您能否帮助使悬停的标记获得最高的zIndex,并帮助更好地定位工具提示?再次感谢。哦,太好了!你能接受这个答案吗?这样我就可以得到我宝贵的声誉积分了明天我会试着看一下定位。干杯,当然。如果您能帮助解决问题2和3,那么我不会接受任何问题:)Thanks@cameron我补充了我的答案——这有什么指导意义吗?我注意到只有当它试图重新绘制图标右侧的工具提示时才会发生这种情况。当它在左边重画时,看起来还可以。你需要调试它,看看它在左边渲染和在右边渲染时的值是什么。原点为顶部,左侧-高度正常,但在右侧渲染时,左侧值不正确。所以我认为这与负值有关。测试左变量的负数,然后执行'this.wdiv.css('right',left);'要更改偏移量吗?
    //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);