jVectorMaps图像标记

我知道这个问题已经被问到了,但是op没有提供任何代码,我显然无法编辑他的答案,所以我将开始一个新的.我的目标是用自定义的drop-pin标记替换点,我最终会为它做一些其他动作.所以作为一个踢球者,必须以某种方式(也许和id)识别这样的动作,以便我可以从jQuery,CSS或javascript中调用它并给它一些用处.

背景:

我从jVectorMaps中提取了宾夕法尼亚州的地图,以及解释如何使用此链接标记图标中的标记图像的部分中的代码.

这是原始代码:

$(function(){
   var plants = [
   {name: 'KKG', coords: [49.9841308, 10.1846373], status: 'activeUntil2018'},
   {name: 'KKK', coords: [53.4104656, 10.4091597], status: 'closed'},
   {name: 'KWG', coords: [52.0348748, 9.4097793], status: 'activeUntil2022'},
   {name: 'KBR', coords: [53.850666, 9.3457603], status: 'closed', offsets: [0, 5]}
];

new jvm.Map({
   container: $('#map'),
   map: 'de_merc',
   markers: plants.map(function(h){ return {name: h.name, latLng: h.coords} }),
   labels: {
      markers: {
        render: function(index){
          return plants[index].name;
        },
        offsets: function(index){
          var offset = plants[index]['offsets'] || [0, 0];

          return [offset[0] - 7, offset[1] + 3];
        }
      }
   },
   series: {
     markers: [{
       attribute: 'image',
       scale: {
         'closed': '/img/icon-np-3.png',
         'activeUntil2018': '/img/icon-np-2.png',
         'activeUntil2022': '/img/icon-np-1.png'
       },
       values: plants.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
       legend: {
         horizontal: true,
         title: 'Nuclear power station status',
         labelRender: function(v){
           return {
           closed: 'Closed',
           activeUntil2018: 'Scheduled for shut down
 before 2018',
           activeUntil2022: 'Scheduled for shut down
 before 2022'
         }[v];
        }
      }
    }]
   }
  });
});

这是我的版本,它显示地图,它确实显示位置,但只作为一个点,而不是标记.(见下面的截图)ps我不关心传说.我正在为此做点什么.

我的代码:

//------------- Vector maps -------------//
     var prison = [
       {name: 'Albion', coords: [41.890611, -80.366454], status: 'active', offsets: [0, 2]}
];


$('#pa-map').vectorMap({
    map: 'us-pa_lcc_en',
    scaleColors: ['#f7f9fe', '#29b6d8'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    backgroundColor: '#fff',
    regionStyle:{
        initial: {
            fill: '#dde1e7',
            "fill-opacity": 1,
            stroke: '#f7f9fe',
            "stroke-width": 0,
            "stroke-opacity": 0
        },
        hover: {
            "fill-opacity": 0.8
        },
        selected: {
            fill: 'yellow'
        }
    },
    markers: prison.map(function(h){ return {name: h.name, latLng: h.coords} }),
    labels: {
        markers: {
          render: function(index){
            return prison[index].name;
          },
          offsets: function(index){
            var offset = prison[index]['offsets'] || [0, 0];

            return [offset[0] - 7, offset[1] + 3];
          }
        }
    },
    series: {
      markers: [{
        attribute: 'image',
        scale: { 'active': '/img/map-marker-icon.png'},
        values: prison.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
      }]
    }
});

我的HTML:

我的CSS:

无关紧要.我稍后会相应地设计.

先感谢您!

将点更改为自定义标记   DEMO
如果您在那里阅读源代码,他们可以选择在jvm.Map.defaultParam中初始化 markerStyle,对于markerStyle,您可以将其定义为图像或填充(此处使用切换案例)我认为在jvm.Legend中. prototype.render

他们也有一些活动

jvm.Map.apiEvents = {
    onRegionTipShow: "regionTipShow",
    onRegionOver: "regionOver",
    onRegionOut: "regionOut",
    onRegionClick: "regionClick",
    onRegionSelected: "regionSelected",
    onMarkerTipShow: "markerTipShow",
    onMarkerOver: "markerOver",
    onMarkerOut: "markerOut",
    onMarkerClick: "markerClick",
    onMarkerSelected: "markerSelected",
    onViewportChange: "viewportChange"
}

所以在这里代码UPDATE你也可以将你的功能附加到onMarkerClick选项

function doWhatever(event, code, obj) {
  alert("Hello");
  console.log(event);
}

var prison = [{
  name: 'Albion',
  coords: [41.890611, -80.366454],
  status: 'active',
  offsets: [0, 2]
}];

var ab = $('#pa-map').vectorMap({
  map: 'us-pa_lcc_en',
  scaleColors: ['#f7f9fe', '#29b6d8'],
  normalizeFunction: 'polynomial',
  hoverOpacity: 0.7,
  hoverColor: false,
  backgroundColor: '#fff',
  regionStyle: {
    initial: {
      fill: '#dde1e7',
      "fill-opacity": 1,
      stroke: '#f7f9fe',
      "stroke-width": 0,
      "stroke-opacity": 0
    },
    hover: {
      "fill-opacity": 0.8
    },
    selected: {
      fill: 'yellow'
    }
  },
  markers: prison.map(function(h) {
    return {
      name: h.name,
      latLng: h.coords
    }
  }),
  labels: {
    markers: {
      render: function(index) {
        return prison[index].name;
      },
      offsets: function(index) {
        var offset = prison[index]['offsets'] || [0, 0];

        return [offset[0] - 7, offset[1] + 3];
      }
    }
  },
  markersSelectable: true,
  markerStyle: {
    initial: {
      image: "http://jvectormap.com/img/icon-np-2.png",

    },
  },
  onMarkerClick: function(event, code) {
    doWhatever(event, code, this);
  }
});