如何更改鼠标悬停和返回上的标记？ [英] how to change marker on mouseover and back?

问题描述

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

我想将标记的图像图标从原始图标1更改为新图标2，显然它只能在1个标记上工作，但不能在其他标记上。

  var map; 
 $ b函数toggleLayer（firLayer，id）
 {
 if（$（'＃'+ id）.is（'：checked'））
 firLayer.setMap （地图）; 
 else 
 firLayer.setMap（null）; 
} 
 
函数初始化（）{
 var mapOptions = {
 zoom：8，
 center：new google.maps.LatLng（40.222869，47.602673 ），
 mapTypeId：google.maps.MapTypeId.TERRAIN，
 zIndex：3 
}; 
 
 //设置地图
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 //添加到添加标记
 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] 
]; 
 //添加infowindow 
 var infowindow = new google.maps.InfoWindow（）; 
 
 //宣布我的变量
 var icon1 =circle.png; 
 var icon2 =circleblack.png; 
 
 var markers = []; 
 var marker，i; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
 map：map，
 visible：false，
 icon：icon1 
}）; 
 
 $ b 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）; //保存所有标记
 
 google.maps.event.addListener（marker，'mouseout'，function（）{
 infowindow.close（）; 
 marker.setIcon（icon1 ）; 
}）; 
  

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

解决方案

您的'mouseout'侦听器没有有效的函数闭包。 $ {$ b $ pre> 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）; //保存所有标记

//固定版本，更改为类似于'mouseover'侦听器
google.maps.event.addListener（marker，'mouseout'，（function（marker ）{
return function（evt）{
infowindow.close（）;
marker.setIcon（icon1）;
}
}）（marker））;
}


概念证明小提琴

代码段：

  var map; function initialize（）{var mapOptions = {zoom：7，center：new google.maps.LatLng（40.222869,47.602673），mapTypeId：google.maps.MapTypeId。 TERRAIN，zIndex：3}; //设置地图map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; //宣布我的变量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; （位置[i] [1]，位置[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（标记）; //标记，'mouseout'，（function（marker）{return function（evt）{infowindow.close（）; marker.setIcon（icon1）;}}）（marker） ）; }} google.maps.event.addDomListener（window，'load'，initialize）; //添加添加markersvar 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]]; //添加infowindowvar infowindow = new google.maps。 InfoWindow（）;  

html，body，＃map-canvas {身高：100％;保证金：0; padding：0;}

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

I have checked all the answers on the stackoverflow but here is my little problem:

I would like to change the image icon of the marker from original icon1 to the new icon2, apparently it only works on 1 marker but not on the rest.

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

No matter what I do I can't change each of the markers back to the original imageicon.

解决方案

You don't have a valid function closure for your 'mouseout' listener.

  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

code snippet:

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

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

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

这篇关于如何更改鼠标悬停和返回上的标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！