求助：点击Mapbox默认Marker切换为PNG Marker的代码问题

我看了你的代码，发现几个关键问题导致功能不正常，咱们一步步来修正：

原代码的核心问题 #

• jQuery语法错误：你用if ((".marker1").show())判断元素可见性是错的，show()是显示元素的方法，判断可见性应该用is(":visible")；另外代码里的括号嵌套也有问题，比如((".marker1").hide())多了一层括号，会直接触发语法报错。
• 事件绑定不够可靠：直接用jQuery给.marker1绑定点击事件，有可能因为DOM元素还没完全渲染完成导致绑定失败。Mapbox的Marker实例本身支持click事件监听，用这个原生方式会更稳妥。
• 替换逻辑有问题：你点击后直接添加了一个新Marker，然后尝试切换显示状态，但旧Marker并没有被移除，两个Marker会叠加在同一位置，视觉上必然出问题。
• 自定义Marker样式问题：你给新元素设置的width和height只有5px，这么小的尺寸会导致PNG图标完全显示不出来，应该设置成和图标匹配的尺寸，或者加上background-size属性让图标填满元素。

修正后的实现方案 #

我推荐用Mapbox Marker原生的点击事件来实现，同时采用「替换现有Marker元素」的方式，这样更高效，不会产生多余的Marker实例：

// 初始化默认Marker
var marker1 = new mapboxgl.Marker({color:'orange', className:'marker1'})
  .setLngLat([2.5,42.5])
  .addTo(map);

// 保存Marker的初始状态，用来切换
var isDefaultMarker = true;

// 监听Marker的点击事件
marker1.getElement().addEventListener('click', function() {
  if (isDefaultMarker) {
    // 创建自定义图标元素
    var customEl = document.createElement('div');
    customEl.className = 'custom-marker pin-orange';
    customEl.style.backgroundImage = 'url("/img/pinOrange.png")';
    customEl.style.width = '30px'; // 根据你的实际图标尺寸调整
    customEl.style.height = '40px';
    customEl.style.backgroundSize = 'cover'; // 确保图标填满元素

    // 替换现有Marker的元素
    marker1.setElement(customEl);
    // 调整偏移让图标中心点对准坐标（按需修改）
    marker1.setOffset([-15, -20]);
  } else {
    // 恢复默认Marker样式
    var defaultEl = document.createElement('div');
    defaultEl.className = 'marker1';
    defaultEl.style.width = '20px';
    defaultEl.style.height = '20px';
    defaultEl.style.backgroundColor = 'orange';
    defaultEl.style.borderRadius = '50%';
    defaultEl.style.border = '2px solid white'; // 模拟Mapbox默认Marker的边框效果

    marker1.setElement(defaultEl);
    marker1.setOffset([0, 0]); // 恢复默认偏移
  }
  // 切换状态
  isDefaultMarker = !isDefaultMarker;
});

如果你更倾向于用jQuery（不推荐，但也可以调整），修正语法后的代码如下：

var marker1 = new mapboxgl.Marker({color:'orange',className:'marker1'})
  .setLngLat([2.5,42.5])
  .addTo(map);

// 用事件委托确保动态元素也能触发点击
$(document).on('click', '.marker1, #pinOrange', function() {
  var $defaultMarker = $('.marker1');
  var $customMarker = $('#pinOrange');

  if ($defaultMarker.is(':visible')) {
    $defaultMarker.hide();
    // 如果自定义Marker不存在，再创建添加
    if ($customMarker.length === 0) {
      var el = document.createElement('div');
      el.id = 'pinOrange';
      el.style.backgroundImage = 'url("/img/pinOrange.png")';
      el.style.width = '30px';
      el.style.height = '40px';
      el.style.backgroundSize = 'cover';
      new mapboxgl.Marker(el, {offset:[-15, -20]})
        .setLngLat([2.5,42.5])
        .addTo(map);
    } else {
      $customMarker.show();
    }
  } else {
    $customMarker.hide();
    $defaultMarker.show();
  }
});

额外提示 #

• 调整offset值可以让自定义图标的中心点准确对应坐标位置，避免点击位置和图标显示位置偏差。
• 确保/img/pinOrange.png的路径正确，可在浏览器控制台查看是否有404错误。
• 优先使用Mapbox原生的事件监听和Marker方法（比如setElement），比jQuery操作DOM更稳定，因为Mapbox会自行管理Marker的生命周期。

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