使用am_map.js时地图选择器图标无法显示的问题求助

问题现象 #

使用am_map.js添加地图标记时，自定义图标无法显示，尝试过CDN图标地址和直接图片URL均无效，但地图定位、缩放等其他功能正常。

排查与解决步骤 #

• 验证图片URL有效性
  直接在浏览器地址栏输入图片链接，确认图片能正常加载。如果加载失败，说明URL失效或目标图片存在防盗链限制，建议更换为自己服务器托管的图片。

• 修正图标HTML语法
  代码中使用了HTML转义字符（<、"），可能导致插件无法正确解析。尝试使用未转义的HTML字符串，并添加明确的宽高样式：

  $("#myMap").am_map('addLayer', {
      name: 'iconLayer',
      points: [lati, long],
      // 改用单引号包裹HTML，避免转义问题，同时指定图标尺寸
      icon: '<img src="https://your-image-url.jpg" style="width:32px; height:32px; border:none;">',
      zoom: 15,
      limitZoom: 18,
  });
  

• 适配插件的图标格式要求
  部分Leaflet封装插件要求使用L.icon对象而非HTML字符串，尝试调整配置：

  $("#myMap").am_map('addLayer', {
      name: 'iconLayer',
      points: [lati, long],
      icon: L.icon({
          iconUrl: 'https://your-image-url.jpg',
          iconSize: [32, 32], // 设置图标宽高
          iconAnchor: [16, 32] // 图标锚点，确保标记点与图标底部中心对齐
      }),
      zoom: 15,
      limitZoom: 18,
  });
  

• 查看浏览器控制台错误
  按F12打开开发者工具，切换到「控制台」标签，查看是否有图片加载相关的错误（如404、跨域CORS错误），根据错误提示调整配置或更换图片源。

原问题代码参考 #

初始化地图：

$(document).ready(function() {
    let lati = Number($('.lat').val());
    let long = Number($('.long').val());

    let map = $("#myMap").am_map({
        center: [lati, long],
        height: '400px',
        background: 'osm',
    });

添加标记图层：

$("#myMap").am_map('addLayer', {
        name: 'iconLayer',
        points: [lati, long],
        icon: '<img src="https://imgv3.fotor.com/images/blog-cover-image/part-blurry-image.jpg">',
        zoom: 15,
        limitZoom: 18,
    });

});

内容的提问来源于stack exchange，提问作者Mr.Min