Пользовательский слой карт Google с кликабельными маркерами - PullRequest
Новая
       61

Пользовательский слой карт Google с кликабельными маркерами

0 голосов
/ 22 сентября 2019

Есть ли способ разместить собственный слой поверх карт Google, не теряя возможность нажимать на маркер?

https://jsfiddle.net/hxyn9Lae/3/

Пока у меня есть этот код, номаркеры больше не поддерживают клики.И я не хочу использовать InfoWindow, потому что слой будет очень сложным в будущем. 

var locations = [];


// Locations
locations = [
  ['1', 'Colliers Wood Station', 51.418187, -0.178096],
  ['2', 'Tandem Centre', 51.413675, -0.1772],
  ['3', 'Horatio Nelson Memorial', 51.413728, -0.192231]
];

function initialize() {

    var mapOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var bounds = new google.maps.LatLngBounds();

        var layer = `
            <div class="map-layer">
                <h6></h6>
            </div>
        `;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                title: locations[i][1],
                position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                map: map
            });

            bounds.extend(marker.position);

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    $('#map-canvas').prepend(layer);
                    $('#map-canvas h6').text(locations[i][1]);
                }
            })(marker, i));
        }

        map.fitBounds(bounds);
}


initialize();

Любая помощь будет отличной.

1 Ответ

1 голос
/ 22 сентября 2019

Хотя ваш код использует наложенный div, а не истинное пользовательское наложение , вы все равно можете добиться желаемого поведения, отключив pointer-events в CSS для наложенного div (в вашем случаеэто CSS для класса map-layer).

Это позволяет вам "щелкнуть" по div, который расположен над картой.

Пример с использованием кода скрипты: 

var locations = [];

// Locations
locations = [
  ['1', 'Colliers Wood Station', 51.418187, -0.178096],
  ['2', 'Tandem Centre', 51.413675, -0.1772],
  ['3', 'Horatio Nelson Memorial', 51.413728, -0.192231]
];

function initialize() {

  var mapOptions = {
    scrollwheel: false,
    draggable: true,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var bounds = new google.maps.LatLngBounds();


  var layer = `
            <div class="map-layer">
            	<h6></h6>
            </div>
        `;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      title: locations[i][1],
      position: new google.maps.LatLng(locations[i][2], locations[i][3]),
      map: map
    });

    bounds.extend(marker.position);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        $('#map-canvas').prepend(layer);
        $('#map-canvas h6').text(locations[i][1]);
      }
    })(marker, i));
  }

  map.fitBounds(bounds);

  var listener = google.maps.event.addListener(map, "idle", function() {
    map.setZoom(14);
    google.maps.event.removeListener(listener);
  });

}


initialize();
#map-canvas {
  width: 100%;
  height: 300px;
}

.map-layer {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

Обратите внимание, что вы также можете включить pointer-events для дочерних элементов, даже если они отключены для родительских элементов.

...