单击更改默认标记映射框答案

【问题标题】：change default marker mapbox on click单击更改默认标记映射框
【发布时间】：2021-03-29 14:42:58
【问题描述】：

我需要你的灯，我想在单击默认标记 mapboxgl 时将其替换为 png 标记，我尝试了此代码，但它不起作用。我不知道这是否是好方法..感谢您的帮助

   var marker1 = new mapboxgl.Marker({color:'orange',className:'marker1'}) 
  .setLngLat([2.5,42.5])
  .addTo(map);
  
   $('.marker1').click(function(event){ 
  var el = document.createElement('div');   
   el.id = 'pinOrange';
   el.style.backgroundImage = 'url("/img/pinOrange.png")';
   el.style.width = '5px';
   el.style.height = '5px';
   
   new mapboxgl.Marker(el, {offset:[-25, -25]})
   .setLngLat([2.5,42.5])
   .addTo(map);
  
    if ((".marker1").show()){ 
    ((".marker1").hide())
    (("#pinOrange").show())
    } else if (("#pinOrange").show()){
    (("#pinOrange").hide())
    ((".marker1").show())
    }
  });

【问题讨论】：

"Uncaught ReferenceError: mapboxgl is not defined" 是您的 sn-p 上的错误消息。

标签： javascript onclick mapbox marker

【解决方案1】：

您的代码似乎来自https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

您应用的修改有效。我已将您的图像替换为 mapbox 示例中给出的图像。

它仅适用于位图格式。不支持 PNG。使用位图时，这不是问题！

以下代码使用位图图像，这就是它起作用的原因。

      var el = document.createElement('div');   
   el.id = 'pinOrange';
   el.style.backgroundImage =
            'url(https://placekitten.com/g/' +
            marker.properties.iconSize.join('/') +
            '/)';
   el.style.width = '5px';
   el.style.height = '5px';
   
   new mapboxgl.Marker(el, {offset:[-25, -25]})
   .setLngLat(marker.geometry.coordinates)
   .addTo(map);
      
      
    });

【讨论】：