如何在jqvmap中为国家各省份添加标记？附代码求助

嘿，你找对方向了！确实是通过pins属性来给省份添加标记，我来给你详细讲清楚具体怎么配置：

1. 先搞懂pins的结构 #

pins是一个键值对对象：

• 键：对应你要标记的省份的唯一代码（这个代码是jqvmap伊朗地图内置的，你可以在地图源文件jquery.vmap.iran.js里找到paths对象的键，那就是各个省份的代码）
• 值：你想显示的标记内容，可以是纯文本，也可以是自定义的HTML元素（比如图标、带样式的标签）

2. 修改你的代码示例 #

我把你的代码修改成带省份标记的版本，你可以直接参考：

HTML部分（不变）

<div id="vmap" style="width: 400px; height: 400px;"></div>

JavaScript部分（添加pins配置）

jQuery(document).ready(function () {
  jQuery('#vmap').vectorMap({
    map: 'iran_ir',
    enableZoom: false,
    showTooltip: true,
    borderColor: '#FFF',
    hoverColor: '#1A3B4C',
    backgroundColor: '#add136',
    borderWidth: 3,
    borderColor: '#B0CE4A',
    borderOpacity: 1,
    color: '#112834',
    // 核心的pins配置
    pins: {
      // 示例：给德黑兰加个星星标记
      'tehran': '<div class="custom-pin">★</div>',
      // 示例：给伊斯法罕加个带样式的文本标记
      'isfahan': '<span class="pin-label">伊斯法罕</span>',
      // 你可以继续添加其他省份的标记，替换成对应的省份代码即可
    },
    pinMode: 'content', // 这个设置要保留，它会把pins的值当作HTML渲染
    // 可选：如果标记位置不对，可以用这个参数微调
    // pinOffset: {x: -8, y: -8}
  });
});

3. 给标记加自定义样式（可选） #

如果想让标记更好看，你可以加CSS样式：

.custom-pin {
  color: #ff4444;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}

.pin-label {
  background: #2196f3;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

小提示 #

• 一定要确认省份代码的正确性，比如你不确定某个省份的代码，可以打开jquery.vmap.iran.js文件，查看里面的paths对象的键，那就是对应的省份代码。
• 如果标记显示位置偏移，调整pinOffset参数的x和y值就能微调位置啦。

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