Question

我已经检查了stackoverflow上的所有答案，但这是我的小问题：

我想将标记的图像图标从原始图标1更改为新图标2，显然它只适用于1个标记但不适用于其他标记。

var map;

function toggleLayer(firLayer,id)
{
  if ($('#'+id).is(':checked'))
    firLayer.setMap(map);
  else
    firLayer.setMap(null);
}

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(40.222869, 47.602673),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    zIndex: 3
};

// Set map    
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// adding to add markers
var locations = [
  ['Location1', 39.031586, 46.590031, 5],
  ['Location2', 38.998439, 46.557591, 4],
  ['Location3', 38.913429, 46.547370, 3],
  ['Location4', 39.090245, 46.703794, 2],
  ['Location5', 39.130588, 46.696239, 1]
];
// adding infowindow
var infowindow = new google.maps.InfoWindow();

//announce my variables
var icon1 ="circle.png";
var icon2 ="circleblack.png";

var markers = [];
var marker, i;

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

google.maps.event.addListener(marker, 'mouseover', (function(marker, i)
{
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
    marker.setIcon(icon2);
  }
})(marker, i));
markers.push(marker); // save all markers

google.maps.event.addListener(marker, 'mouseout', function() {
  infowindow.close();
  marker.setIcon(icon1);
});

无论我做什么，我都无法将每个标记更改回原始图像。

Answer 1

你没有有效的功能关闭功能。监听器。

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

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function(evt) {
        infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
        marker.setIcon(icon2);
      }
    })(marker, i));
    markers.push(marker); // save all markers

    // fixed version, changed to be similiar to the 'mouseover' listener
    google.maps.event.addListener(marker, 'mouseout', (function(marker) {
      return function(evt) {
        infowindow.close();
        marker.setIcon(icon1);
      }
    })(marker));
  }

proof of concept fiddle

代码段

＆＃13;

var map;

function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(40.222869, 47.602673),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    zIndex: 3
  };

  // Set map    
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  //announce my variables
  var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  var icon2 = "http://maps.google.com/mapfiles/ms/micons/green.png";


  var markers = [];
  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      // visible: false,
      icon: icon1
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function(evt) {
        infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
        marker.setIcon(icon2);
      }
    })(marker, i));
    markers.push(marker); // save all markers

    google.maps.event.addListener(marker, 'mouseout', (function(marker) {
      return function(evt) {
        infowindow.close();
        marker.setIcon(icon1);
      }
    })(marker));
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
// adding to add markers
var locations = [
  ['Location1', 39.031586, 46.590031, 5],
  ['Location2', 38.998439, 46.557591, 4],
  ['Location3', 38.913429, 46.547370, 3],
  ['Location4', 39.090245, 46.703794, 2],
  ['Location5', 39.130588, 46.696239, 1]
];
// adding infowindow
var infowindow = new google.maps.InfoWindow();

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

＆＃13;

如何在鼠标悬停和返回时更改标记？

1 个答案: