Question

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

enter image description here Larger Image here

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

enter image description here Larger Image here

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

enter image description here Larger Image here

是否可以防止标记重复？或者是否可以防止地图重复？这样我就不必处理标记重复了吗？

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

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

enter image description 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>

Answer 1

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

是

从谷歌地图JavaScript API V3参考（3.19），如果您为标记设置了markerOptions属性优化为错误，它不会重复但只显示在中心地图。

请参阅：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 });

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

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

我将优化设置为false，然后查看页面以查找与我的标记关联的id（或至少类）。我打算做＃34;额外＆＃34;标记不可见。事实证明元素存在，但没有id或类。就像我正在考虑使用jQuery识别它们的其他方法一样，我碰巧抬头看着我的地图＆＃34;并实现了＆＃34;额外＆＃34;标记消失了！ ☺

请注意：基于Google的文档，我怀疑这种行为（＆＃34;额外的＆＃34;标记未显示）可能是一个无意识的＆＃34;功能＆＃34;。< / p>

干杯，布鲁斯。

Answer 2

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

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

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

Answer 3

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

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

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

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

4 个答案: