Question

我想要的是当用户执行鼠标悬停（悬停）然后图标更改。我的代码如下：

handler = Gmaps.build("Google", {
markers: {
  maxRandomDistance: null
}
});
handler.buildMap({
provider: {},
internal: {
  id: "map-canvas"
}
}, function() {
var markers;
markers = handler.addMarkers(ar);
_.each(ar, function(json, index) {
  json.marker = markers[index];
  $(".location-" + json.id).on("mouseover", function() {
    json.picture = {
      url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
      width: 36,
      height: 36
    };
    json.marker.setMap(handler.getMap());
    json.marker.panTo();
    handler.removeMarker(json.marker);
    handler.addMarker(json);
  }).on("mouseout", function() {
    json.picture = '';
    handler.removeMarker(json.marker);
    handler.addMarker(json);
  });
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});

使用此代码，标记的颜色可以从红色变为绿色。但是，当用户从悬停区域移除鼠标时，颜色不会变回原始颜色。请问有人可以就此问题向我提出建议吗？

由于

Answer 1

Hai感谢@apneadiving的回答。我修改了我的代码

hoverPicture = {
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
width: 33,
height: 33
};
handler = Gmaps.build("Google", {
markers: {
  maxRandomDistance: null
}
});
handler.buildMap({
provider: {},
internal: {
  id: "map-canvas"
}
}, function() {
var markers;
markers = handler.addMarkers(ar);
_.each(ar, function(json, index) {
  var gr;
  json.marker = markers[index];
  gr = {};
  gr.marker = void 0;
  $(".location-" + json.id).on("mouseover", function() {
    gr = {
      lat: json.lat,
      lng: json.lng,
      picture: hoverPicture
    };
    json.marker.panTo();
    handler.removeMarker(json.marker);
    gr.marker = handler.addMarker(gr);
  }).on("mouseout", function() {
    handler.removeMarker(gr.marker);
    json.marker = handler.addMarker(json);
  });
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});

因此新图标需要在addMarker

之后插入变量

Answer 2

尝试类似：

_.each(ar, function(json, index) {

  var json.marker = markers[index];
  var initialPicture = json.picture;
  var hoverPicture = {
    url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
    width: 36,
    height: 36
  }

  $(".location-" + json.id).on("mouseover", function() {
    json.picture = hoverPicture;
    json.marker.setMap(handler.getMap());
    json.marker.panTo();
    handler.removeMarker(json.marker);
    handler.addMarker(json);
  }).on("mouseout", function() {
    json.picture = initialPicture;
    handler.removeMarker(json.marker);
    var newMarker = handler.addMarker(json);
    json.marker = newMarker;
  });
});

鼠标悬停或更改图标标记时

2 个答案: