Javascript 在自定义google地图中显示查看器的大致位置

我一直在使用谷歌地图API开发一个网站，在这个网站上我从头开始制作自己的地图（很像“幻想”世界地图）

我想要的是，当用户查看某个区域时（不仅仅是集中在一个点上，也可能是一个宽度为多个“屏幕”的区域），位置将显示在地图上，最有可能是放置在地图上的一个div中，当用户滚动并进入另一个区域时，该位置将发生变化

例如，当用户在沙漠区域上滚动时，div将显示“沙漠”，但当屏幕中心移动到海面上时，它将显示“海”等

我想这将涉及定义“位置”，即多个横向/纵向点之间的区域，并跟踪用户的位置

---

非常感谢您的帮助，谢谢

我找到了这个问题的答案，所以我想我会把它贴在这里给子孙后代，以防其他人也这么做，或者有人想改进它

我使用LatLngBounds对象在地图上定义了两个区域，如下所示：

    var desert = new google.maps.LatLngBounds(
                new google.maps.LatLng(27.694746, 28.294032),
                new google.maps.LatLng(62.921001, 78.391689)
                );
            var plains = new google.maps.LatLngBounds(
                new google.maps.LatLng(82.171166, 131.930577),
                new google.maps.LatLng(84.144231, 105.541417)
                ); 

然后使用一个函数来跟踪屏幕中心坐标，并检测它们是否在这些边界内。如果是这样，div的内部HTML（放置在地图上）将被更新

            google.maps.event.addListener(map, 'center_changed', function() {
            trackCenter = map.getCenter();
    if (desert.contains(trackCenter)) {
    var place = 'Sands of Time';
    }
    else if (plains.contains(trackCenter)) {
    var place = "Plains of Kh'rrnthar";
    }
    else {
    place = 'the Frozen Sea';
    }
    document.getElementById('locationlabel').innerHTML = '<p>Location ~ ' + place + '</p>';
            });

google.maps.event.addListener（映射，'center\u changed'，函数（）{
trackCenter=map.getCenter（）；
if（沙漠包含（轨道中心））{
var place=‘时间之沙’；
}
else if（plains.contains（轨迹中心））{
var place=“Kh'rrnthar平原”；
}
否则{
地点=‘冰冻的海洋’；
}
document.getElementById（'locationlabel'）。innerHTML='Location~'+place+'
'；
});

---

我希望这对某些人有用，因为我找到了这个问题的答案，所以我想我会把它贴在这里给子孙后代，以防其他人也这么做，或者有人想改进它

我使用LatLngBounds对象在地图上定义了两个区域，如下所示：

    var desert = new google.maps.LatLngBounds(
                new google.maps.LatLng(27.694746, 28.294032),
                new google.maps.LatLng(62.921001, 78.391689)
                );
            var plains = new google.maps.LatLngBounds(
                new google.maps.LatLng(82.171166, 131.930577),
                new google.maps.LatLng(84.144231, 105.541417)
                ); 

然后使用一个函数来跟踪屏幕中心坐标，并检测它们是否在这些边界内。如果是这样，div的内部HTML（放置在地图上）将被更新

            google.maps.event.addListener(map, 'center_changed', function() {
            trackCenter = map.getCenter();
    if (desert.contains(trackCenter)) {
    var place = 'Sands of Time';
    }
    else if (plains.contains(trackCenter)) {
    var place = "Plains of Kh'rrnthar";
    }
    else {
    place = 'the Frozen Sea';
    }
    document.getElementById('locationlabel').innerHTML = '<p>Location ~ ' + place + '</p>';
            });

google.maps.event.addListener（映射，'center\u changed'，函数（）{
trackCenter=map.getCenter（）；
if（沙漠包含（轨道中心））{
var place=‘时间之沙’；
}
else if（plains.contains（轨迹中心））{
var place=“Kh'rrnthar平原”；
}
否则{
地点=‘冰冻的海洋’；
}
document.getElementById（'locationlabel'）。innerHTML='Location~'+place+'
'；
});

---

我希望这对某些人有用，因为你想要什么是非常困难的，因为标准的真实世界地理编码将不适用于幻想地图。任何地理编码都需要定制，而且很难找到专家提供帮助，因为此类专业知识非常有限。我现在的想法是，你可以考虑谷歌地图。对于这一特定方面，您将有更好的成功机会，因为jVectorMap天生就可以处理定义的区域。另一方面，你可能会发现jVectorMap在其他方面过于有限，特别是图形细节（地形等）。谢谢你的建议，我想我最终会坚持使用谷歌地图，因为它在所有其他方面都很好。你有没有关于谷歌地图“地理编码”方面的链接，我可能会研究一下，以便更好地理解我所问问题的本质，尽管你是对的，这将涉及很多定制编码（如果可能的话）。Awnine，我只知道谷歌地图“服务”中出现的地理编码方面但这些内容告诉您如何使用这些服务，而不是如何设置（然后访问）您自己的定制服务，而这正是您想要的。你必须用合适的谷歌搜索词组，或者在这里问另一个问题-这个问题的标题不会吸引合适的专业知识。谢谢，我会继续在其他地方研究，然后尝试将问题分解成更小的部分，并逐一解决。你想要的是非常困难的，因为标准，现实世界的地理编码不适用于幻想地图。任何地理编码都需要定制，而且很难找到专家提供帮助，因为此类专业知识非常有限。我现在的想法是，你可以考虑谷歌地图。对于这一特定方面，您将有更好的成功机会，因为jVectorMap天生就可以处理定义的区域。另一方面，你可能会发现jVectorMap在其他方面过于有限，特别是图形细节（地形等）。谢谢你的建议，我想我最终会坚持使用谷歌地图，因为它在所有其他方面都很好。你有没有关于谷歌地图“地理编码”方面的链接，我可能会研究一下，以便更好地理解我所问问题的本质，尽管你是对的，这将涉及很多定制编码（如果可能的话）。Awnine，我只知道谷歌地图“服务”中出现的地理编码方面但这些内容告诉您如何使用这些服务，而不是如何设置（然后访问）您自己的定制服务，而这正是您想要的。你必须用合适的谷歌搜索词组，或者在这里问另一个问题——这个问题的标题不会吸引合适的专业知识。谢谢，我会继续在其他地方进行研究，然后尝试将问题分解成更小的部分，并逐一解决。