jvectormap: Zeichnen Sie Linien zwischen Markern?

Ich versuche zu überprüfen, ob es möglich ist, mit jvectormap Linien zwischen Markern auf einer Karte zu zeichnen. Hierjvectormap: Zeichnen Sie Linien zwischen Markern?

ist eine Idee von dem, was ich zu erreichen bin versucht: http://i.imgur.com/p1Zypv3.gif

Kann jemand mir einen Tip geben, wenn dies möglich ist, und wenn ja, wie?

Alle Eingaben schätzen.

Quelle

2013-04-03 user2128860

Dies kann mit einer Kombination von Jvectormap, Jvectormaps Koordinaten Konverter Methode latLngToPoint() und einer SVG-Schicht auf der Jvectormap erfolgen. Wenn Sie SVG.js als Ebene über Jvectormap verwenden, können Sie praktisch alles tun, was Sie mit SVG tun können, während Sie Punkte durch Längen- und Breitengradkoordinaten ersetzen.

Sie müssen Jvectormap, die Jvectormap-Kartendatei, svg.js und svg.path.js-Plugin (siehe https://svgdotjs.github.io) in der Seitenüberschrift laden. Sie müssen außerdem zwei divs in einem erstellen, das sich mit den absoluten CSS-Einstellungen überschneiden kann.

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

Erstellen Sie ein Array von Markern mit Breiten- und Längen für Leitungen zu und von auf der Karte zeichnen:

var markerArray = [ 
    {name:'Houston', latLng:[29.761993,-95.369568]}, 
    {name:'New York', latLng:[40.710833,-74.002533]}, 
    {name:'Kansas City', latLng:[39.115145,-94.633484]} 
];

Dann wird Ihr Jvectormap die Markierungen oben mit ein:

var map = $('#map').vectorMap({ 
    map: 'us_aea_en', 
    zoomMin: 1, 
    zoomMax: 1, 
    markers: markerArray 
});

Schließlich, rufen Sie Ihre Karte als ein Objekt, erstellen Sie Ihre SVG-Ebene, konvertieren Sie die lat-long-Koordinaten zu Punkten innerhalb der div:

var map = $('#map').vectorMap('get', 'mapObject'); 
var draw = SVG('svgMapOverlay').size(660, 400); 
var coords1 = map.latLngToPoint(markerArray[0].latLng[0],markerArray[0].latLng[1]); 
var coords2 = map.latLngToPoint(markerArray[1].latLng[0],markerArray[1].latLng[1]); 
draw.path().attr({ fill: 'none',stroke: '#c00', 'stroke-width': 2 }).M(coords1.x, coords1.y).L(coords2.x, coords2.y);

Die meisten dieser JS sollte in einen $(function() Anruf oder $(document).ready(function() Block für den Start gehen.

Sie können diese JSFiddle sehen für weitere Informationen: http://jsfiddle.net/ruzel/V8dyd/

Haftungsausschluss: Ich weiß nicht, was mit Zoomen geschieht; Für dieses Beispiel ist es deaktiviert.

Quelle

2013-10-09 04:26:56 russellmania

-1

var markerIndex=1; 
 
var markerCoords=[]; 
 
latLng={72,62}; 
 
markersCoords[markerIndex] = latLng; 
 
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]}); 
 
markerIndex += 1;

Quelle

2015-12-16 10:55:31

So versuche ich habe Antwort die @russellmania aus. Es funktioniert jedoch nur mit der SVG-Version, die im jsfiddle-Link enthalten ist. Wenn ich den gleichen Code mit der aktuellen Version von SVG ausprobiere, stürzt es auf dem SVG ab und sagt, dass die Funktion "this.clear (...) .attr" nicht definiert ist. Ich wollte jedoch, dass die JVector-Funktionen zum Zoomen und Verschieben von Karten weiterhin funktionieren. Aber mit SVG-Ebene über der Karte funktioniert es nicht. Oder lassen Sie uns sagen, es gibt 2 Optionen: 1) deaktivieren Verschieben und Zoomen (ich will das nicht) 2) aktivieren zoomen, bewegen, aber dann SWG Schicht nicht zoomen und bewegen Sie die gleiche wie JVector tut, so wird der Pfad desynchronisiert von die Karte :)

Ich habe einen Weg gefunden, in JVector Linie mit Markern zu zeichnen. Aber das ist nicht der richtige Weg. Ich gehe also immer noch durch die Dokumentation von jvectormap, wenn es etwas gibt, wie man eine Zeile direkt in der jvectormap zeichnet.

Quelle

2017-12-19 04:00:27

Schließlich habe ich versucht, die Funktionalität des Hinzufügens von Zeilen zu JVectorMap zu implementieren. Die Lösung mit SVG ist in Ordnung, funktioniert aber nicht mit Zoom, Move und Panzoom.So fügte ich direkt zu JVectorMap die Option hinzu, Zeilen zu spezifizieren, ähnlich wie Regionen und Markierungen. Sie können den Status von Pull Request https://github.com/bjornd/jvectormap/pull/431 überprüfen, wo alles enthalten ist. Jetzt können Sie Linie mit

var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];

Noch ziehen, die Pull-Anforderung in einem neuen Version von jvectormap enthalten sein muss, hoffen, dass der Autor wird es bald tun :) Der Arbeitscode ist an meinem personnal Blog hier: https://sevenhillsaway.com/map/

Quelle

2017-12-20 13:46:00

jvectormap: Zeichnen Sie Linien zwischen Markern?

Antwort

Verwandte Themen