如何实现鼠标悬停与点击时切换对应地址的Google Maps

你的代码问题出在匹配地图项的逻辑上：直接用$(".map-item").attr("data-map")只会拿到第一个地图元素的属性值，没法对应到当前悬停/点击的地址项；而且鼠标离开的逻辑会错误隐藏所有地图。下面是修正后的完整代码：

修正后的HTML（无需改动） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="address-item" data-map="map1">Address 1</div>
<div class="address-item" data-map="map2">Address 2</div>

<div class="maps">
  <div class="map-item" data-map="map1">Map 1</div>
  <div class="map-item" data-map="map2">Map 2</div>
</div>

修正后的CSS（更清晰的默认显示逻辑） #

/* 默认隐藏所有地图项 */
.maps .map-item {
  display: none;
}
/* 默认显示第一个地图 */
.maps .map-item[data-map="map1"] {
  display: block;
}

修正后的JS（实现悬停+点击切换） #

jQuery(document).ready(function($) {
  // 封装切换地图的通用函数
  function switchMap(targetMap) {
    // 先隐藏所有地图项
    $('.map-item').fadeOut();
    // 再显示目标地图项
    $('.map-item[data-map="' + targetMap + '"]').fadeIn();
  }

  // 鼠标悬停切换地图
  $('.address-item').mouseenter(function() {
    var targetMap = $(this).data('map');
    switchMap(targetMap);
  });

  // 点击地址切换地图
  $('.address-item').click(function() {
    var targetMap = $(this).data('map');
    switchMap(targetMap);
  });

  // 可选：鼠标离开地址区域后恢复默认地图（不需要可删除）
  $('.address-item').mouseleave(function() {
    switchMap('map1');
  });
});

关键改动说明 #

• 用$(this).data('map')获取当前地址项的目标地图标识，比attr()更简洁高效
• 封装通用切换函数，避免重复代码
• 采用「先隐藏所有，再显示目标」的逻辑，确保每次只有一个地图可见
• 同时实现鼠标悬停和点击两种触发方式，满足需求

内容的提问来源于stack exchange，提问作者yanksi_