自定义地图类型：重复地图和标记。如何为地图添加填充？答案

【问题标题】：Custom Map Types: repeating maps and markers. How to adding padding to map?自定义地图类型：重复地图和标记。如何为地图添加填充？
【发布时间】：2023-03-29 11:35:01
【问题描述】：

借助 Google Maps API (v3)，我为虚构的游戏世界创建了自定义地图类型。默认情况下，地图，甚至自定义地图类型，水平重复（见下图）。

Larger Image here

是否可以防止地图水平重复？ 对于我的地图，它不代表行星或球形世界，因此让它永远水平重复根本没有意义。我已经想出了如何简单地不为左右重复的地图加载图块，如下所示：

Larger Image here

但是，当您创建标记时，标记仍会针对所有重复的地图显示：

Larger Image here

是否可以阻止标记重复？ 或者是否可以完全阻止地图重复？这样我就不必处理重复的标记？

解决方法：限制超出地图边界的平移 我已经阅读了各种解决方法，这些解决方法简单地讨论了限制用户可以向左或向右平移多远。这对我不起作用，因为我必须允许用户一直放大并立即查看整个地图。如果它们一直放大，重复的标记仍然可见，这是不可接受的。

是否可以在地图上添加一堆填充？ 这样地图之间就有很大的空间：

Larger Image here

如果我能够添加足够的填充，那么限制平移将对我有用，因为任何重复的标记都可能被填充推得足够远，以至于用户永远看不到它们。

最后是我的代码，非常简单：

（注意：我使用的地图瓦片图像尚未在线提供）

<!DOCTYPE html>
<html style='height: 100%'>
    <head>
        <link rel="stylesheet" type="text/css" href="normalize.css" />
        <style>
            html, body { height: 100%;}
            #map_canvas { height: 1000px;}
        </style>


    </head>
    <body style='height: 100%'>
        <div id="map_canvas"></div>

        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type='text/javascript'>

            var options =
            {
                getTileUrl: function(coord, zoom)
                {
                    // Don't load tiles for repeated maps
                    var tileRange = 1 << zoom;
                    if ( coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange )
                        return null;

                    // Load the tile for the requested coordinate
                    var file = 'images/zoom' + zoom + '/tile_' + zoom + '_' + (coord.x) + '_' + (coord.y) + '.jpg';

                    return file;
                },
                tileSize: new google.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 9,
                radius: 1738000, // I got this from an example in the api, I have no idea what this does
                name: 'Map',
            };

            var mapOptions =
            {
                center: new google.maps.LatLng(0,0),
                zoom: 2,
                backgroundColor: '#000',
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            var mapType = new google.maps.ImageMapType(options);
            map.mapTypes.set('map', mapType);
            map.setMapTypeId('map');

            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(0,0),
                    map: map,
                    title: "Test"
            });

            </script>
    </body>
</html>

【问题讨论】：

这里：Dynamic google map with custom tiles prevent repeating pan
@RASG 仅解决了平移限制。地图两侧仍需要填充。
抱歉，本来打算把它当作一个骗子来关闭，但后来意识到事实并非如此。随时重新申请赏金。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

回答这个问题：是否可以防止标记重复？

是的。

来自 Google Maps JavaScript API V3 参考 (3.19)，如果您将标记的 markerOptions 属性 optimized 设置为 false，它不会重复，只会显示在中心地图。

见：https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

所以，在你的代码中，我会这样修改 var marker（添加 optimized: false）：

var marker = new google.maps.Marker({ position: new google.maps.LatLng(0,0), map: map, title: "Test" optimized: false });

根据谷歌的文档（我添加了粗体），

优化将许多标记呈现为单个静态元素。 默认启用优化渲染。禁用动画 GIF 或 PNG 的优化呈现，或者当每个标记必须呈现为单独的 DOM 元素时（仅限高级用法）。

我将优化设置为 false，然后浏览页面以找到与我的标记关联的 id（或至少是类）。我打算让“额外”标记不可见。事实证明元素在那里，但没有 id 或 class。就在我考虑使用 jQuery 识别它们的其他方法时，我碰巧查看了我的“地图”并意识到“额外的”标记不见了！ ☺

请注意：根据 Google 的文档，我怀疑这种行为（“额外”标记未显示）可能是一个意外的“功能”。

干杯，布鲁斯。

【讨论】：

是否可以选择折线和多边形等其他对象？

【解决方案2】：

在我看来，您只需要更改起始缩放和最小缩放限制。

当您处于缩放级别 1 时，即使 google 也会遇到重复，但它不会让您缩小到低于该级别。

只需将 minZoom 和 maxZoom 属性添加到您的选项对象以限制缩放。

【讨论】：

不幸的是，这并不能解决问题。如果您缩小到足以看到整个地图，那么您可以看到重复的标记。如果我不想让我的用户一次查看整个地图，那么这将是一个选项，但不幸的是它不是。
曾经尝试将标记添加到谷歌地图并缩小到 1 级？你可以看到它重复。您正在尝试解决一个无法解决的问题。

【解决方案3】：

您可以尝试在重复区域上戴上口罩，但我没有尝试过。这看起来可以解决您的问题：Apply mask to Google Map。更新：仅在需要时应用蒙版，即缩放最低时。我认为调整浏览器窗口大小不会影响地图中的任何内容。它也与问题无关，问题是面具是否放在标记的顶部。更新 2：v2 似乎可行，但 v3 不行。在 v2 中，您可以禁用投影类中的水平复制：Google Maps API v3 with custom map image - markers repeating horizontally。

【讨论】：

当你放大时，面具不会遮住你想看的地图部分吗？当您调整浏览器窗口大小时，遮罩将如何工作？
如果您平移地图，蒙版必须以某种方式跟随地图，不是吗？
你能把它组合成不以最低缩放比例显示吗？但我不明白你的问题？你可以让面具随地图移动，不是吗？
可以使用 v2 吗？在 v2 中似乎可行：stackoverflow.com/questions/10675268/….

【解决方案4】：

还有这个问题的朋友可以看看我的解决方案。

1- 将地图缩放设置为 (2) 并添加标记位置（纬度、经度），即

  var minZoomLevel = 2;
  map.setZoom(minZoomLevel);

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < result.length; i++){
        var latlng = new google.maps.LatLng(result[i].Lat, result[i].Lng);
        bounds.extend(latlng);
    });

2- 在缩放更改时附加事件侦听器，即

google.maps.event.addListener(map, 'zoom_changed', function() {
        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
    });

3- 附加一个中心更改的侦听器（成功了），即

google.maps.event.addListener(map, 'center_changed', function() 
{ 
   checkBounds(bounds);
}

 function checkBounds(allowedBounds) {
    if(allowedBounds.contains(map.getCenter())) {
        return;
    }
    var mapCenter = map.getCenter();
    var X = mapCenter.lng();
    var Y = mapCenter.lat();

    var AmaxX = allowedBounds.getNorthEast().lng();
    var AmaxY = allowedBounds.getNorthEast().lat();
    var AminX = allowedBounds.getSouthWest().lng();
    var AminY = allowedBounds.getSouthWest().lat();

    if (X < AminX) {X = AminX;}
    if (X > AmaxX) {X = AmaxX;}
    if (Y < AminY) {Y = AminY;}
    if (Y > AmaxY) {Y = AmaxY;}

    map.setCenter(new google.maps.LatLng(Y,X));
}

每次更改中心时，它都会检查您的点并将地图限制在特定区域。设置缩放将只显示一个世界图块，并且检查边界将限制水平滚动！

【讨论】：