jvectormaps 自定义 onMarkerClick

Question

我使用 jvectormaps 成功绘制了地图，用户在其中单击标记我触发了警报。

我希望能够在标记数组中添加一个自定义项作为记录 ID。有人可以修改下面代码中的 alert(id); 行，以便它访问当前标记的 ID 吗？

这是整个脚本：

$(function(){
  var markers = [
        {id: 1, latLng: [33.44838, -112.07404], name: 'Phoenix, AZ', style: {r: 12, fill: '#76c043'}},
        {id: 2, latLng: [39.73924, -104.99025], name: 'Denver, CO', style: {r: 30, fill: '#ffdd85'}},
        {id: 3, latLng: [37.33821, -121.88633], name: 'San Jose, CA', style: {r: 30, fill: '#f58a78'}}
      ];

  var map = new jvm.Map({
    container: $('.map'),
    map: 'us_aea_en',
    labels: {
      regions: {
        render: function(code){
          var doNotShow = ['US-RI', 'US-DC'];

          if (doNotShow.indexOf(code) === -1) {
            return code.split('-')[1];
          }
        },
        offsets: function(code){
          return {
            'CA': [-10, 10],
            'ID': [0, 40],
            'OK': [25, 0],
            'LA': [-20, 0],
            'FL': [45, 0],
            'KY': [10, 5],
            'VA': [15, 5],
            'MI': [30, 30],
            'AK': [50, -25],
            'HI': [25, 50]
          }[code.split('-')[1]];
        }
      }
    },
    backgroundColor:'#D3D3D3',
    zoomButtons:false,
    markers: markers,
    regionsSelectable: false,
    markersSelectable: false,
    markersSelectableOne: false,
    onMarkerClick: function(event, id){
      alert(id);
    },
         onRegionLabelShow: function (e, el, code) {
                 e.preventDefault();
         }
  });
});

我在标记数组中添加了 id: 1、id:2、id:3 部分，现在我只需要帮助访问它。

Answer 1

只需通过本地 id 访问您的标记本地变量：

onMarkerClick: function(event, id){
  alert(markers[id].id);
},

jvectormaps 自定义 onMarkerClick

jvectormaps customize onMarkerClick

javascript

jvectormap