标记悬停在Google地图上 [英] Marker hovering on a Google Map

问题描述

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

I am displaying multiple events as markers on a Google Map.

悬停会更改标记的颜色.(请参见下图).

Hover on the event changes the marker color. (See picture below).

多个事件可以在同一地址发生.

Multiple event can take place at the same address.

这是我的问题，因为事件的标记可以隐藏在最新事件的后面，因此无法查看位置该事件通过将鼠标悬停在上面来进行.

And this is my problem because the marker of an event can be hidden behind the latest one and it is then impossible to see where the event takes place by hover on it.

在同一地点发生多个事件的情况下，如何看到标记的颜色变化是什么解决方案?

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

Here is a working Fiddle with event 3 hidden behind event 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>

推荐答案

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

You can make the bottom marker visible by seeing its zIndex above the other marker's 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>

这篇关于标记悬停在Google地图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！