jVectorMaps marcatori di immagini

Question

So che questa domanda è stata fatta ma l'op non ha fornito alcun codice e non posso modificare la sua risposta ovviamente, quindi ne inizierò una nuova. Il mio obiettivo è di sostituire il punto con un marcatore drop-pin personalizzato che alla fine avrò qualche altra azione per questo. Quindi, come kicker, tale azione deve essere identificata in qualche modo (forse e id) in modo che io possa chiamarla da jQuery, CSS o javascript e dargli un po 'di utilità.

Sfondo:

ho estratto la mappa della Pennsylvania dal jVectorMaps e il codice dalla sezione che spiega come utilizzare le immagini marcatore da questo link marker-icons.

Questo è il codice originale:

$(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<br> before 2018', 
      activeUntil2022: 'Scheduled for shut down<br> before 2022' 
     }[v]; 
     } 
     } 
    }] 
    } 
    }); 
}); 

E questa è la mia versione, che lo fa visualizzare la mappa, lo fa visualizzare la posizione, ma solo come un punto, non è il marcatore. (Vedi immagine sotto) p.s. Non mi interessa la leggenda. Sto facendo qualcos'altro per questo.

Il mio codice:

//------------- 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 }, {}), 
     }] 
    } 
}); 

mio HTML:

<div id="pa-map" style="width: 100%; height: 470px"></div> 

mio CSS:

irrilevante. Progetterò di conseguenza più tardi.

Grazie in anticipo!

Answer 1

Per cambiare punto di indicatore personalizzato   DEMO
Se andate a leggere il codice sorgente non hanno l'opzione per l'inizializzazione markerStyle in jvm.Map.defaultParam e per markerStyle si può definire come immagine o riempimento (caso interruttore viene utilizzato qui) penso che in jvm.Legend.prototype.render

si ha anche alcuni eventi

01.235.164,106 mila

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" 
} 

Quindi, ecco il codice UPDATE è anche possibile collegare la funzione di opzione onMarkerClick a

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); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" rel="stylesheet" /> 
 
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/bjornd/jvectormap/master/tests/assets/us/jquery-jvectormap-data-us-pa-lcc-en.js"></script> 
 

 

 

 
<div id="pa-map" style="width: 100%; height: 470px"></div>