12

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

在此处输入图像描述 大图在这里

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

在此处输入图像描述 大图在这里

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

在此处输入图像描述 大图在这里

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

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

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

在此处输入图像描述 大图在这里

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

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

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

<!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>
4

4 回答 4

4

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

是的。

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

请参阅：https ://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

因此，在您的代码中，我会这样修改var 标记（添加优化： 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 或类。就在我考虑使用 jQuery 识别它们的其他方法时，我碰巧查看了我的“地图”，并意识到“额外”的标记不见了！☺</p>

提醒一句：根据谷歌的文档，我怀疑这种行为（“额外”标记没有出现）可能是一个意外的“功能”。

干杯，布鲁斯。

于 2015-03-30T16:08:46.370 回答
1

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

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

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

于 2012-11-07T15:51:26.373 回答
0

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

于 2012-11-07T17:31:17.800 回答
0

对于那些仍然有这个问题的人，看看我的解决方案。

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

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

于 2016-04-19T07:26:58.567 回答