【问题标题】:Displaying the viewers rough location in custom google map在自定义谷歌地图中显示观众的大致位置
【发布时间】:2013-09-30 18:32:05
【问题描述】:

我一直在使用 google maps API 开发一个网站,我在其中从头开始制作自己的地图(很像“幻想”世界地图)。

我想要的是,当用户查看某个区域(不仅仅是以单个点为中心,还可能是一个宽度为多个“屏幕”的区域)时,该位置将显示在地图上的 div 中最有可能放置在地图上,并且这个位置会随着用户滚动并进入另一个区域而改变。

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

我想这将涉及定义许多纬度/经度点之间的区域的“位置”,并跟踪用户的位置。

非常感谢任何帮助,谢谢!

【问题讨论】:

  • 您想要的非常困难,因为标准的真实世界地理编码不适用于幻想地图。任何地理编码都需要定制,而且很难找到专家来提供帮助,因为这样的专业知识非常有限。我的直接想法是你可以考虑jVectorMap 而不是谷歌地图。对于这个特定方面,您有更大的成功机会,因为 jVectorMap 本质上适用于定义的区域。不利的一面是,您可能会发现 jVectorMap 在其他方面过于有限,尤其是图形细节(地形等)。
  • 感谢您的建议,我想我最终会坚持使用谷歌地图,因为它在所有其他方面都运行良好。您是否有任何指向谷歌地图“地理编码”方面信息的链接,我可能会调查一下以更好地了解我所问的内容的性质,尽管您是对的,它将涉及大量定制编码(如果它完全可能)。
  • Awnine,我只知道出现在API Documentation 的“服务”部分中的 Google.maps 的地理编码器方面,但这些告诉你如何使用这样的服务,而不是如何设置(然后访问)您自己的定制服务 - 这就是您想要的。您将不得不在 SO 上使用合适的 Google 搜索或在此处提出另一个问题 - 此问题的标题不会吸引合适的专业知识。
  • 感谢,我将在其他地方继续研究,然后尝试将问题分解为更小的部分并一一解决。

标签: javascript google-maps google-maps-api-3 location


【解决方案1】:

我找到了这个问题的答案,所以我想把它贴在这里以备后人之用,以防其他人也想做同样的事情,或者如果有人想改进它。

我使用 LatLngBounds 对象在地图上定义了 2 个区域,如下所示:

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

我希望这对某人有用,问候

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-17
    • 1970-01-01
    • 2011-11-10
    • 2011-01-23
    • 1970-01-01
    相关资源
    最近更新 更多