自定义地图类型：重复地图和标记。如何添加填充到地图？ [英] Custom Map Types: repeating maps and markers. How to adding padding to map?

问题描述

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

是否有可能保持标记不重复？或者是否可以保持地图不被重复？这样我就不必处理重复的标记了吗？

---

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

---

是否有可能如何在地图上添加一堆填充物？这样地图之间就有了大量的空间：

/i.stack.imgur.com/qFdwr.jpgalt =在这里输入图片描述>
在这里放大图片

如果我能够添加足够的填充，那么限制平移对我很有用，因为任何重复的标记都可以推得足够远

---

最后我的代码非常简单：

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

 <！DOCTYPE html> 
< html style ='height：100％'> 
< head> 
< link rel =stylesheettype =text / csshref =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）
 {
 //不加载重复映射的贴图
 var tileRange = 1<<放大; 
 if（coord.y< 0 || coord.y> = tileRange || coord.x< 0 || coord.x> = tileRange）
 return null; 
 
 //为要求的坐标加载图块
 var file ='images / zoom'+ zoom +'/ tile_'+ zoom +'_'+（coord.x）+' _'+（coord.y）+'.jpg'; 
 
返回文件; 
}，
 tileSize：新的google.maps.Size（256,256），
 minZoom：1，
 maxZoom：9，
 radius：1738000，//我从api的例子中得到了这个，我不知道这是什么
名称：'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> 
  

解决方案

回答这个问题：是可以保持标记不重复？

是。

从Google Maps JavaScript API V3参考（3.19），如果您为marker设置了markerOptions属性优化为 false ，则不会重复，只会显示在中心地图上。

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

因此，在您的代码中，我会将 var marker 修改为（加入优化：false ）：

var marker = new google.maps.Marker（{
位置：new google.maps.LatLng（0,0），
map：map，
title：Test
优化：false
}）;

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

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

我将优化设置为false，然后查看页面以查找与我的标记关联的id（或至少是class）。我打算让额外标记不可见。事实证明，这些元素在那里，但没有身份证或班级。就像我正在考虑用其他方式来使用jQuery来识别它们一样，我碰巧看到我的地图，并意识到额外标记消失了！ ☺

请注意：基于Google的文档，我怀疑这种行为（额外标记没有显示出来）可能是一个意想不到的功能。 p>

干杯，
布鲁斯。

With the Google Maps API (v3) I've created a custom map type for a fictional game world. By default, maps, even custom map types, repeat horizontally (see image below).

---

Larger Image here

---

Is it possible to keep the map from repeating horizontally? For my map, it does not represent a planet or spherical world, so having it repeat horizontally forever doesn't make sense at all. I have figured out how to simply not load tiles for the repeated maps on the left and right like so:

Larger Image here

---

HOWEVER, when you create markers, the markers still show up for all the repeated maps:

Larger Image here

Is it possible to keep the markers from repeating? Or is it possible to keep the map from repeating at all? That way I don't have to deal with markers repeating?

---

Work Around: Limit Panning beyond the Map Bounds I've read various work-arounds that discuss simply limiting how far the user can pan to the left or right. This won't work for me because I have to allow the user to zoom all the way out and view the entire map at once. If they zoom all the way out, repeated markers are still visible, which is unacceptable.

---

Is it possible to adding a bunch of padding to the map? That way there is a large amount of space between the maps:

Larger Image here

If I was able to add enough padding, then limiting the panning would work for me, because any repeated markers could be pushed far enough away by the padding that the user would never see them.

---

Finally my code, pretty simple:

(note: the map tile images I'm using are not available online yet)

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

解决方案

In answer to the question: Is it possible to keep the markers from repeating?

Yes.

From Google Maps JavaScript API V3 Reference (3.19), if you set the markerOptions property optimized to false for your marker, it does not repeat but only shows up on the center map.

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

So, in your code, I would modify var marker as such (adding optimized: false):

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

According to Google's docs (I've added the bolding),

Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).

I set optimized to false and then looked through the page to find the id (or at least class) associated with my markers. I was going to make the "extra" markers non-visible. It turns out the elements are there but have no id or class. Just as I was contemplating other ways to identify them using jQuery, I happened to look up at my "map" and realized the "extra" markers were gone! ☺

A word of caution: based on Google's docs, I suspect this behavior (the "extra" markers not showing up) may be an unintended "feature".

Cheers, Bruce.

这篇关于自定义地图类型：重复地图和标记。如何添加填充到地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！