Zeichnung benutzerdefinierte Markierungen auf einer jVectorMap

Ich bin neu qQuery und es nicht getan haben eine ganze Menge in javascript.

Habe ich eine kleine jVectorMap mit über 10 Ländern auf es und ich will zeichnen Sie ein kleines Kreisdiagramm an der Oberseite jedes Land.

Sehe ich, dass Sie erstellen können Marker, aber ich kann nicht sehen, wie Sie würden zuweisen benutzerdefinierter Markierungen in einem Land.

Ich bin einfach nur glücklich zeichnen direkt auf der Spitze des jVectorMap mit einem SVG-plugin, aber ich kann nicht scheinen, um zu arbeiten.

E. g. mit dem "jQuery SVG" - plugin, ich habe versucht, ziehen Sie einen Kreis auf der Oberseite der Karte. Hier ist der code:

<html>
<head>
  <link rel="stylesheet" href="jquery-jvectormap-1.1.1.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="jquery.svg.css" type="text/css" media="screen"/>
  <script src="jquery-1.8.0.min.js"></script>
  <script src="jquery-jvectormap-1.1.1.min.js"></script>
  <script src="jquery-jvectormap-north-west-europe.js"></script>
  <script src="jquery.svg.min.js"></script>
  <script>
    function drawCircle(svg) { 
      svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); 
    }
  </script>
</head>
<body>
  <div id="europe-map" style="width: 400px; height: 400px"></div>
  <script>
    $(function(){
      $('#europe-map').vectorMap({
        map: 'north-west-europe',
        focusOn: {
        x: 0.3,
        y: 0.4,
        scale: 1.25
    },
      });
    });

    $('#europe-map').svg({onLoad: drawCircle});
  </script>
</body>
</html>

Und hier ist das Ergebnis:

Zeichnung benutzerdefinierte Markierungen auf einer jVectorMap

Effektiv, eine doppelte div geschaffen für die jQuery SVG "Leinwand" und die Weltkarte ist nach unten gedrückt. Ist es möglich, Verweis auf die SVG-Zeichnung Platz, der von jVectorMap zu zeichnen Zeug auf?

Vielleicht gibt es einen besseren Weg, dies zu tun mit benutzerdefinierten Markierungen oder ähnliches?

Vielen Dank, und entschuldigt wenn dies eine dumme Frage stellen.

InformationsquelleAutor Aonghus Shortt | 2013-01-07
  1. 3

    Müssen Sie CSS verwenden, um ziehen die beiden Schichten über der Oberseite von einander. Erstellen Sie die folgende HTML:

    <div id="mapContainer" style="position:relative">
    <div id="europe-map" style="position:absolute;top:0px;left:0px"></div>
    <div id="europe-map-overlay" style="position:absolute;top:0px;left:0px"></div>
</div>

    Nun, anstelle der Anwendung

    $('#europe-map').svg({onLoad: drawCircle});

    verwenden

    $('#europe-map-overlay').svg({onLoad: drawCircle});

    statt.

    Dadurch wird der Kreis auf der Oberseite der Karte. Wenn Sie wollen, um den Kreis auf spezifische Längen-und breitengradkoordinaten, verwenden Sie die Jvectormap latLngToPoint() Methode, um die covnersion.

    InformationsquelleAutor russellmania
  2. 2

    wenn Sie wollen nicht svg-marker, verwenden Sie einen neuen layer (div über die svg-layer in der Karte)

    Verweis auf die Karte 

    map = $("#world-map-gdp").vectorMap('get', 'mapObject');

    und verwenden Sie die Funktion anzeigen.latLngToPoint (), um den Punkt in der neuen Ebene.

    var newMarkerP = map.latLngToPoint(lat,lng);
$('#marker1').css('top',newMarkerP.x);
$('#marker1').css('top',newMarkerP.y);

    Können Sie verschieben Sie die Marker, wenn zoom oder bewegen, verwenden Sie die gleiche Funktion aus und wenden css-Links und css-top.

    Werden können, Sie können spielen, mit den oberen und linken Rand des neuen Marker, sondern ist eine einfache Lösung.

    • Danke, ich werde versuchen, diese und sehen, wie ich auf Sie
    InformationsquelleAutor Blas Ruiz
  3. 0

    Können Sie die JVectorMap-API die Methode zum zeichnen ist addCircle.

    • Ich möchte hinzufügen, pie-charts, so brauche ich mehr Funktionalität als addCircle. Trotzdem danke
    InformationsquelleAutor MIGUEL ANGEL
Schreibe einen Kommentar