Google map api，如何处理同一位置的所有标记的标记悬停事件（重叠标记）？

Question

我正在使用带角度的谷歌地图 API。在一个简单的应用程序中，左侧有一个带有许多标记的 MAP，右侧有一个包含有关标记信息的表格列表，每个标记一行。在标记悬停时，我使用下面的代码突出显示右侧悬停标记的行。

google.maps.event.addListener(marker, 'mouseover', function () {
            var temp_marker_name = this.marker_name;
            $scope.$apply(function () {
                $scope.active_row_name = temp_marker_name;
            });
        });
        google.maps.event.addListener(marker, 'mouseout', function () {
            $scope.$apply(function () {
                $scope.active_row_name = '';
            });
        });

所以在这里，我在标记悬停时设置名称，并根据名称突出右侧的行。

现在，有一种情况是在同一位置绘制了多个标记，当我将鼠标悬停在该标记上时，它仅突出显示右侧的一行。

但我想突出显示该位置标记的所有行。所以，我想要悬停事件将为同一位置的所有标记触发的东西，我可以创建一个名称数组，然后我可以放一个条件以突出显示行。

Answer 1

悬停只会检测到顶部的标记。您可以做的是维护一个标记数组，并在您的事件侦听器中迭代该数组以获取具有相同 lat lng 值的标记。

编辑： 获得标记列表后，对于同一位置的每个标记，您可以手动触发鼠标悬停事件。

google.maps.event.trigger(marker, 'mouseover');

Answer 2

您可以通过在另一个标记的 zIndex 上方查看其 zIndex 来使底部标记可见。

function createMarker(point, html, i, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    zIndex: 0,
    draggable: true

  });
  var activeIcon, idleIcon;

  idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';

  marker.setIcon(idleIcon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
      marker.setZIndex(100);
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
      marker.setZIndex(0);
    }
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });

  return marker;
}

概念证明小提琴

var geocoder;
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var name = "Event1";
  var address = "address 1";
  var point = new google.maps.LatLng(42, -72);
  var html = "<b>" + name + "</b> <br/>" + address;
  var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
  var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';

  var i = 0;
  createMarker(point, html, i, map);

  point = new google.maps.LatLng(42.02, -72.02);
  name = "Event2";
  address = "address 2";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, html, i, map);

  point = new google.maps.LatLng(42.01, -72.01);
  name = "Event3";
  address = "address 3";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, html, i, map);
  map.setCenter(marker.getPosition());

  point = new google.maps.LatLng(42.01, -72.01);
  name = "Event4";
  address = "address 3";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, html, i, map);
  map.setCenter(marker.getPosition());


}

function createMarker(point, html, i, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    zIndex: 0,
    draggable: true

  });
  var activeIcon, idleIcon;

  idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';

  marker.setIcon(idleIcon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
      marker.setZIndex(100);
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
      marker.setZIndex(0);
    }
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });

  return marker;
}


function hover(marker, i) {
  document.getElementById('a' + i).onmouseover = function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
  }
  document.getElementById('a' + i).onmouseleave = function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
  }
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?" type="text/javascript"></script>

<div id="a0">Event 1 address 1</div>
<div id="a1">Event 2 address 2</div>
<div id="a2">Event 3 address 3</div>
<div id="a3">Event 4 address 3</div>

<div id="map_canvas"></div>

更多信息 [Marker hovering on a Google Map