jvectormaps自定义onMarkerClick

时间:2016-04-20 02:07:38

标签: javascript jvectormap

我正在使用jvectormaps成功绘制地图,用户点击标记我有触发警报。

我希望能够在markers数组中添加一个自定义项目作为记录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: 1id:2id:3部分,现在我只需要帮助即可访问它。

1 个答案:

答案 0 :(得分:1)

只需通过本地ID访问您的标记本地变量:

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