logo标签列表

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

javascriptgoogle-mapsgoogle-maps-api-3
12
使用Google Maps API (v3)，我为一个虚构的游戏世界创建了一个自定义地图类型。默认情况下，即使是自定义地图类型，地图也会在水平方向上重复（参见下面的图片）。

enter image description here 点击查看大图

有没有可能防止地图在水平方向上重复？ 对于我的地图来说，它不代表一个行星或球形世界，因此让它永远在水平方向上重复毫无意义。我已经想出了如何简单地不加载左右重复地图的瓦片，如下所示：

enter image description here 点击查看大图

但是，当你创建标记时，标记仍然会出现在所有重复的地图中：

enter image description here 点击查看大图

有没有可能防止标记重复出现？ 或者有没有可能完全防止地图重复？这样我就不必处理标记的重复了。

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

有没有可能在地图上添加大量填充？ 这样地图之间就有很大的空间：

enter image description 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>
动态谷歌地图与自定义瓦片防止重复平移 - RASG
@RASG 只解决了平移限制，地图两侧仍需要填充。 - Jake Wilson
抱歉，本来想将此问题关闭，但后来发现它并不是重复的。请随意重新申请悬赏。 - casperOne
4个回答
4
回答问题：是否可以避免标记重复出现？

是的。

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

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

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

我将optimized设置为false，然后查找与我的标记关联的id（或至少class）。我将使“额外”的标记不可见。结果发现这些元素存在，但没有id或class。正当我在考虑使用jQuery来识别它们的其他方法时，我偶然抬头看了一下我的“地图”，发现“额外”的标记已经消失了！☺

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

祝好， Bruce。

1
其他对象，如折线和多边形，是否有类似的选项？ - cadmy
1

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

即使是谷歌在缩放级别为1时也会出现重复，但它不会让你缩放到比那更低。

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

很遗憾，那并没有解决问题。如果你缩放到足够远可以看到整张地图，那么你就会看到重复的标记。如果我不想让用户一次性查看整张地图，那么这可能是个选择，但很不幸，它并不是。 - Jake Wilson
尝试在谷歌地图上添加标记并缩小到一级吗？你会看到它重复出现。你正在努力解决一个无法解决的问题。 - Adam Jenkins
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));
}

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

您可以尝试在重复的区域上放置一个遮罩，但我没有尝试过。这似乎可以解决您的问题：将遮罩应用于谷歌地图。 更新：只有当缩放最低时才使用面具。我认为调整浏览器窗口的大小不会影响地图中的任何内容。这也与问题无关，问题是面具是否覆盖了标记。 更新2：在v2中似乎是可能的，但在v3中不可能。在v2中，您可以在投影类中禁用水平复制：具有自定义地图图像的Google Maps API v3-标记水平重复。

当您放大地图时，遮罩不会覆盖您想要查看的部分吗？如果您调整浏览器窗口大小，遮罩会如何工作？ - Jake Wilson
如果你把地图拖动一下，口罩也必须跟随地图移动，是吧？ - Jake Wilson
你能否将其合并，以便在最低缩放时不出现分离窗格？但我不明白你的问题？你可以让遮罩跟随地图移动，不是吗？ - Micromega
你能使用v2吗？在v2中似乎是可能的：http://stackoverflow.com/questions/10675268/google-maps-api-v3-with-custom-map-image-markers-repeating-horizontally?rq=1。 - Micromega
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接