带有可点击标记的谷歌地图自定义图层

Question

有没有办法在 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();

任何帮助都会很棒。

Answer 1

尽管您的代码使用的是覆盖的 div 而不是真正的 custom overlay，但您仍然可以通过在 CSS 中为覆盖的 pointer-events 禁用 pointer-events 来实现所需的行为div（在您的情况下，它是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，即使它们在父元素上被禁用。