Mit jVectorMap ändern Sie das Marker-Label, um mehrzeilig zu sein

Question

Ich versuche jVectorMap's Bibliothek zu verwenden, um verschiedene Marker zu plotten, die Beschriftungen neben ihnen haben.

Das Problem, das ich in renne, ist mit der render Funktion unter Beschriftungen, wo ich versuche, ein Array zu durchlaufen und es zu dem Namen hinzuzufügen. Leider fügt es den analysierten HTML-Code nicht in HTML, sondern in die Textdatei ein.

labels: { 
     markers: { 
     render: function(index) { 
      var markerStr = ""; 
      markerStr += currentMarkers[index].name; 
      $.each(currentMarkers[index].divisions, function(index, currentDivision) { 
      markerStr += currentDivision + "<br>"; 
      }); 
      return $.parseHTML(markerStr); 
     }, 
     offsets: function(index) { 
      return currentMarkers[index].offsets || [0, 0]; 
     } 
     } 
    } 

Ich habe made a codepen example, so dass Sie sehen können, was ich rede.

Verschiedene Variablen:

var allMarkers = [{ 
    latLng: [43.831997, 11.204543], 
    name: 'Location A', 
    country: 'IT', 
    divisions: ["AAAAAAA", "BBBBBBBBB"] 
    }, { 
    latLng: [40.537014, -3.636961], 
    name: 'Location B', 
    country: 'ES', 
    divisions: ["R & D", "BBBBBBBBBB", "AAAAAAAA"] 
    }, { 
    latLng: [53.409245, -2.990841], 
    name: 'Location C', 
    country: 'GB', 
    divisions: ["BBBBBBBBB"] 
    }, { 
    latLng: [51.375644, -0.677483], 
    name: 'Location D', 
    country: 'GB', 
    offsets: [-4, -8], 
    divisions: ["CCCCCCCC"] 
    }, { 
    latLng: [51.266658, -1.093064], 
    name: 'Location E', 
    country: 'GB', 
    offsets: [-100, 5], 
    divisions: ["DDDDDDD"] 
    }, { 
    latLng: [51.196622, -0.393301], 
    name: 'Location F', 
    country: 'GB', 
    divisions: ["CCCCCC"] 
    }, { 
    latLng: [50.226984, 8.615192], 
    name: 'Location G', 
    country: 'DE', 
    divisions: ["DDDDDDDDD"] 
    }, { 
    latLng: [51.896741, -8.487941], 
    name: 'Location H', 
    country: 'IE', 
    offsets: [-3, -10], 
    divisions: ["FFFFFFFFFF", "EEEEEEEEEEE"] 
    }, { 
    latLng: [53.350129, -6.263215], 
    name: 'Location I', 
    country: 'IE', 
    offsets: [-60, 0], 
    divisions: ["EEEEEEEE"] 
    }, { 
    latLng: [51.706063, -8.522351], 
    name: 'Location J', 
    country: 'IE', 
    offsets: [-66, 2], 
    divisions: ["BBBBBBBBB"] 
    }, { 
    latLng: [48.884578, 2.269055], 
    name: 'Location K', 
    country: 'FR', 
    offsets: [0, -3], 
    divisions: ["GGGGGGGGG"] 
    }, { 
    latLng: [48.489941, 7.678864], 
    name: 'Location L', 
    country: 'FR', 
    divisions: ["HHHHHHHHH"] 
    }]; 
    var currentMarkers = allMarkers.slice(); 
    var highlightedCountries = ['GB', 'IT', 'ES', 'FR', 'DE', 'IE']; 

Code:

var mapObj = new jvm.Map({ 
    container: $('#map'), 
    map: 'europe_mill', 
    focusOn: { 
     x: 0.5, 
     y: 0.6, 
     scale: 2 
    }, 
    markerStyle: { 
     initial: { 
     fill: '#fff', 
     stroke: '#383f47' 
     } 
    }, 
    regionStyle: { 
     hover: { 
     "fill-opacity": .6, 
     } 
    }, 
    onRegionTipShow: function(e, el, code) { 
     if (highlightedCountries.indexOf(code) > -1) { 
     $('.jvectormap-tip').removeClass('hidden'); 
     } else { 
     $('path[data-code="' + code + '"]').attr('fill-opacity', 1).attr('cursor', 'default'); 
     $('.jvectormap-tip').addClass('hidden'); 
     } 
    }, 
    backgroundColor: '#d0e7f7', 
    markers: currentMarkers, 
    series: { 
     regions: [{ 
     values: { 
      GB: '#cecece', 
      IT: '#cecece', 
      ES: '#cecece', 
      FR: '#cecece', 
      DE: '#cecece', 
      IE: '#cecece' 
     } 
     }] 
    }, 
    labels: { 
     markers: { 
     render: function(index) { 
      var markerStr = ""; 
      markerStr += currentMarkers[index].name; 
      $.each(currentMarkers[index].divisions, function(index, currentDivision) { 
      markerStr += currentDivision + "<br>"; 
      }); 
      return $.parseHTML(markerStr); 
     }, 
     offsets: function(index) { 
      return currentMarkers[index].offsets || [0, 0]; 
     } 
     } 
    }, 
    onMarkerTipShow: function(e, label, code) { 
     var labelStr = ""; 
     $.each(currentMarkers[code].divisions, function(index, currentDivision) { 
     labelStr += currentDivision + "<br>"; 
     }); 
     label.html(labelStr); 
    }, 
    zoomOnScroll: false 
    }); 

Answer 1

Ok, hier ist eine Antwort, die Sie Brüche in den Etiketten mit tspans hinzufügen können, die in der Lage sind zu enthalten innerhalb der Svgs:

$(document).ready(function() { 

Variablen:

var allMarkers = [{ 
    latLng: [43.831997, 11.204543], 
    name: 'Location A', 
    country: 'IT', 
    divisions: ["AAAAAAA", "BBBBBBBBB"] 
    }, { 
    latLng: [40.537014, -3.636961], 
    name: 'Location B', 
    country: 'ES', 
    divisions: ["R & D", "BBBBBBBBBB", "AAAAAAAA"] 
    }, { 
    latLng: [53.409245, -2.990841], 
    name: 'Location C', 
    country: 'GB', 
    divisions: ["BBBBBBBBB"] 
    }, { 
    latLng: [51.375644, -0.677483], 
    name: 'Location D', 
    country: 'GB', 
    offsets: [-4, -8], 
    divisions: ["CCCCCCCC"] 
    }, { 
    latLng: [51.266658, -1.093064], 
    name: 'Location E', 
    country: 'GB', 
    offsets: [-100, 5], 
    divisions: ["DDDDDDD"] 
    }, { 
    latLng: [51.196622, -0.393301], 
    name: 'Location F', 
    country: 'GB', 
    divisions: ["CCCCCC"] 
    }, { 
    latLng: [50.226984, 8.615192], 
    name: 'Location G', 
    country: 'DE', 
    divisions: ["DDDDDDDDD"] 
    }, { 
    latLng: [51.896741, -8.487941], 
    name: 'Location H', 
    country: 'IE', 
    offsets: [-3, -10], 
    divisions: ["FFFFFFFFFF", "EEEEEEEEEEE"] 
    }, { 
    latLng: [53.350129, -6.263215], 
    name: 'Location I', 
    country: 'IE', 
    offsets: [-60, 0], 
    divisions: ["EEEEEEEE"] 
    }, { 
    latLng: [51.706063, -8.522351], 
    name: 'Location J', 
    country: 'IE', 
    offsets: [-66, 2], 
    divisions: ["BBBBBBBBB"] 
    }, { 
    latLng: [48.884578, 2.269055], 
    name: 'Location K', 
    country: 'FR', 
    offsets: [0, -3], 
    divisions: ["GGGGGGGGG"] 
    }, { 
    latLng: [48.489941, 7.678864], 
    name: 'Location L', 
    country: 'FR', 
    divisions: ["HHHHHHHHH"] 
    }]; 
    var currentMarkers = allMarkers.slice(); 
    var highlightedCountries = ['GB', 'IT', 'ES', 'FR', 'DE', 'IE']; 

CODE

var mapObj = new jvm.Map({ 
    container: $('#map'), 
    map: 'europe_mill', 
    focusOn: { 
     x: 0.5, 
     y: 0.6, 
     scale: 2 
    }, 
    markerStyle: { 
     initial: { 
     fill: '#fff', 
     stroke: '#383f47' 
     } 
    }, 
    regionStyle: { 
     hover: { 
     "fill-opacity": .6, 
     } 
    }, 
    onRegionTipShow: function(e, el, code) { 
     if (highlightedCountries.indexOf(code) > -1) { 
     $('.jvectormap-tip').removeClass('hidden'); 
     } else { 
     $('path[data-code="' + code + '"]').attr('fill-opacity', 1).attr('cursor', 'default'); 
     $('.jvectormap-tip').addClass('hidden'); 
     } 
    }, 
    backgroundColor: '#d0e7f7', 
    markers: currentMarkers, 
    series: { 
     regions: [{ 
     values: { 
      GB: '#cecece', 
      IT: '#cecece', 
      ES: '#cecece', 
      FR: '#cecece', 
      DE: '#cecece', 
      IE: '#cecece' 
     } 
     }] 
    }, 
    labels: { 
     markers: { 
     render: function(index) { 
      var markerStr = ""; 
      markerStr += '<tspan dy="0em">' + currentMarkers[index].name + "</tspan>"; 
      $.each(currentMarkers[index].divisions, function(index, currentDivision) { 
      markerStr += '<tspan style="font-weight:100;font-style:italic;" dy="1.2em">' + currentDivision + "</tspan>"; 
      }); 
      nextTick(fixMarkers); 
      return markerStr; 
     }, 
     offsets: function(index) { 
      return currentMarkers[index].offsets || [0, 0]; 
     } 
     } 
    }, 
    zoomOnScroll: false 
    }); 

    $('#map').on('click', function(event) { 
    mapObj.removeAllMarkers(); 
    currentMarkers = []; 
    resetCountryColors(highlightedCountries); 
    var countryCode = $(event.target).attr('data-code'); 
    if (highlightedCountries.indexOf(countryCode) > -1) { 
     $(event.target).css('fill', '#d52b1e'); 
     for (var i = 0; i < allMarkers.length; i++) { 
     if (countryCode == allMarkers[i].country) { 
      currentMarkers.push(allMarkers[i]); 
     } 
     } 
     mapObj.addMarkers(currentMarkers, []); 
    } 

    mapObj.updateSize(); 
    }); 
    $(window).resize(function() { 
    mapObj.updateSize(); 
    fixMarkers(); 
    }); 
    $('.jvectormap-container').mousemove(fixMarkers).swipe({ 
    swipeStatus: fixMarkers 
    }); 

}); 

function resetCountryColors(chosenCountries) { 
    $.each(chosenCountries, function(index, currentCountry) { 
    $('.jvectormap-element[data-code="' + currentCountry + '"]').css('fill', '#cecece'); 
    }); 
} 

function fixMarkers() { 
    $('text.jvectormap-marker').each(function() { 
    var $this = $(this); 
    var text = $this.text(); 
    if (text.indexOf('</tspan>') !== -1) { 
     $this.html(text); 
    } 
    $this.find('tspan').each(function() { 
     $(this).attr('x', $this.attr('x')); 
    }); 
    }); 
} 

function nextTick(cb) { 
    if (typeof window.Promise === 'function') { 
    Promise.resolve().then(cb); 
    } else if (typeof window.setImmediate === 'function') { 
    setImmediate(cb); 
    } else { 
    setTimeout(cb, 0); 
    } 
} 

Hinweis insbesondere der folgende Code, der

 markerStr += '<tspan dy="0em">' + currentMarkers[index].name + "</tspan>"; 
     $.each(currentMarkers[index].divisions, function(index, currentDivision) { 
     markerStr += '<tspan style="font-weight:100;font-style:italic;" dy="1.2em">' + currentDivision + "</tspan>"; 
     }); 
     nextTick(fixMarkers); 
     return markerStr; 

und der fixMarkers Funktion tspans in den Code Orte, die konvertiert die tspans in H TML.

HERE IS A WORKING EXAMPLE

Answer 2

Gefunden eine einfache Möglichkeit:

onMarkerLabelShow: function(event, label, code) { 
    var mySplitResult = label.html().split("\r\n"); 
    label.html(""); 
    for(i = 0; i < mySplitResult.length; i++){ 
     if (i == mySplitResult.length-1){label.html(label.html() + mySplitResult[i]); } else{label.html(label.html() + mySplitResult[i] + "<br />"); }     
    }   
}