Пользовательские типы карт: повторение карт и маркеров. Как добавить отступы для отображения?

С API Карт Google (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>

Ответ 1

В ответ на вопрос: возможно ли повторять отметки?

Да.

Из справочника API Карт Google Maps 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 });

В соответствии с документами Google (я добавил жирный шрифт),

Оптимизация делает многие маркеры единым статическим элементом. Оптимизированный рендеринг включен по умолчанию. Отключите оптимизированный рендеринг для анимированных GIF или PNG или когда каждый маркер должен быть представлен как отдельный элемент DOM (только для расширенного использования).

Я настроил оптимизацию на false, а затем просмотрел страницу, чтобы найти идентификатор (или, по крайней мере, класс), связанный с моими маркерами. Я собирался сделать "лишние" маркеры невидимыми. Оказывается, элементы есть, но не имеют идентификатора или класса. Так же, как я рассматривал другие способы идентифицировать их с помощью jQuery, мне довелось посмотреть на мою "карту" и поняли, что "лишние" маркеры исчезли! ☺

Предупреждение: на основании документов Google я подозреваю, что это поведение ( "лишние" маркеры не отображаются) может быть непреднамеренной "функцией".

Cheers, Брюс.

Ответ 2

Похоже, вам просто нужно изменить стартовый масштаб и минимальный масштаб.

Даже Google запускает повторы, когда вы находитесь на уровне масштабирования 1, но это не позволяет вам уменьшить масштаб ниже.

Просто добавьте свойства minZoom и maxZoom к объекту параметров, чтобы ограничить масштабирование.

Ответ 3

Вы можете попытаться поместить маску на повторную область, но я не пробовал ее. Похоже, что он может решить вашу проблему: Применить маску к Карте Google. Обновление: применяйте маску только тогда, когда вам это нужно, т.е. Когда масштаб является самым низким. Я не думаю, что изменение размера окна браузера повлияет на что-либо на карте. Это также не имеет никакого отношения к вопросу, и проблема в том, что маска лежит поверх маркера. Обновление 2: кажется, возможно с v2, но не с v3. В версии 2 вы можете отключить горизонтальные копии в классе проецирования: API Google Maps v3 с пользовательскими изображениями карт, повторяющимися по горизонтали.

Ответ 4

Для тех, у кого есть эта проблема, посмотрите мое решение.

1- Настройте масштабирование карт на (2) и добавьте позиции маркера (lat, long) i.e

  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- Прикрепите прослушиватель событий при изменении масштаба i.e

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

3 - Прикрепите прослушиватель с центром в центре (это сделал трюк) i.e

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

Каждый раз, когда вы меняете центр, он проверяет ваши очки и ограничивает отображение определенной областью. При установке масштабирования будет отображаться только одна мировая плитка, а контрольная граница ограничит горизонтальную прокрутку!