javascript - 谷歌地图自定义 map 标记图像悬停不起作用

Question

我只想为谷歌地图自定义 map 制作器图像提供悬停。我正在使用图像路径来设置自定义图像的样式。风格完美运作。但悬停不起作用。

Jsfiddle

这是我的代码

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"] {
   border: 4px solid #73cccc !important;
};

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"]:hover{
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map_canvas" style="height:400px; width: 100%"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"></script>
<script>
var image = 'https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png';
var mapOptions = {
  zoom: 13,
  center: new google.maps.LatLng(37.423, -122.082), 
  mapTypeId: google.maps.MapTypeId.ROADMAP 
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var myPos = new google.maps.LatLng(37.4231054, -122.08239880000002); 
var myMarker = new google.maps.Marker({position: myPos, map: map, icon: image });
</script>

是否有任何CSS解决方案或者这与谷歌地图鼠标悬停事件有关？

Answer 1

这是我的解决方案

为标记添加这些事件监听器

  myMarker.addListener('mouseover', function() {
    console.log("mouseover");
    this.setOpacity(0.5);
  });
    myMarker.addListener('mouseout', function() {
    console.log("mouseout");
    this.setOpacity(1);
  });

无需添加额外的 CSS 来实现不透明度

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"] {
  border: 4px solid #73cccc !important;
}

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"]:hover {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map_canvas" style="height:400px; width: 100%"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"></script>
<script>
  var image = 'https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png';
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(37.423, -122.082),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var myPos = new google.maps.LatLng(37.4231054, -122.08239880000002);
  var myMarker = new google.maps.Marker({
    position: myPos,
    map: map,
    icon: image
  });
  myMarker.addListener('mouseover', function() {
    console.log("mouseover");
    this.setOpacity(0.5);
  });
    myMarker.addListener('mouseout', function() {
    console.log("mouseout");
    this.setOpacity(1);
  });
</script>