Question

我在Google地图上将多个事件显示为标记。

事件上的

悬停会更改标记颜色。（见下图）。

多个事件可以在同一地址进行。

这是我的问题，因为事件的标记可以隐藏在最新的标记后面，然后就不可能看到它在哪里事件发生在它上面。

如果在同一个地方发生多个事件，会看到标记颜色发生变化的解决方案是什么？

这是一个工作小提琴，事件3隐藏在事件4后面：http://jsfiddle.net/5qk4zqz4/110/

以下是代码：

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,
    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');
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
    }
  }
  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>

Answer 1

您可以通过在其他标记的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;
}

proof of concept fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因此，您可能希望调整要突出显示的标记的z-index，使其显示在另一个标记上方。也许是这样的：

elem.onmouseover = function() {
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
    marker.setZIndex(99);
}
elem.onmouseleave = function() {
    marker.setIcon(idleIcon);
    marker.setZIndex(1);
}

您可能还需要在创建标记时最初设置zIndex属性。

标记悬停在Google地图上

2 个答案: