Próbuję sprawdzić, czy możliwe jest rysowanie linii między znacznikami na mapie przy użyciu jvectormap.jvectormap: Rysuj linie między znacznikami?
Oto pomysł co usiłuję osiągnąć: http://i.imgur.com/p1Zypv3.gif
Czy ktoś może dać mi wskazówkę, jeśli jest to możliwe i jeśli tak, to w jaki sposób?
Doceniam wszelkie dane wejściowe.
Można to zrobić za pomocą kombinacji Jvectormap, Jvectormaps coordinates converter method latLngToPoint() i warstwy SVG na szczycie Jvectormap. W rzeczywistości użycie SVG.js jako warstwy na wierzchu Jvectormap pozwala zrobić praktycznie wszystko, co można zrobić z SVG, zastępując punkty współrzędnymi długości i szerokości geograficznej.
Musisz wczytać plik Jvectormap, plik mapy Jvectormap, svg.js i svg.path.js (patrz https://svgdotjs.github.io) w nagłówku strony. Musisz również utworzyć dwa elementy div w jednym, które mogą nakładać się na ustawienia bezwzględne CSS.
<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>
Utwórz tablicę wskaźników z szerokości i długości geograficznej na rysowanie linii do iz na mapie:
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]}
];
Następnie skonfigurować Jvectormap wykorzystaniem markerów powyżej:
var map = $('#map').vectorMap({
map: 'us_aea_en',
zoomMin: 1,
zoomMax: 1,
markers: markerArray
});
Na koniec przypisz swoją mapę jako obiekt, utwórz swoją warstwę SVG, przekształć współrzędne długie na punkty w dziale:
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);
Większość tego JS powinna przejść do wywołania $(function() lub bloku $(document).ready(function() do uruchomienia.
Widać to JSFiddle więcej szczegółów: http://jsfiddle.net/ruzel/V8dyd/
Zastrzeżenie: Nie wiem co się dzieje z powiększaniem; jest wyłączony dla tego przykładu.
var markerIndex=1;
var markerCoords=[];
latLng={72,62};
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;Więc staram się odpowiedź @russellmania. Działa jednak tylko z wersją SVG, która jest zawarta w łączu jsfiddle. Jeśli spróbowałem tego samego kodu z aktualną wersją SVG, to zawiesza się na SVG mówiąc "this.clear (...). Attr" funkcja nie jest zdefiniowana. Jednak dla mnie chciałem, aby powiększanie i powiększanie map JVector wciąż działało. Ale z warstwą SVG na mapie nie działa. Lub powiedzmy, są 2 opcje: 1) wyłączanie przesuwania i powiększania (nie chcę tego) 2) włączanie powiększania, przesuwanie, ale potem warstwa SWG robi zoom i porusza się tak samo, jak robi to JVector, więc ścieżka zostaje zsynchronizowana z mapa :)
Znalazłem sposób narysowania linii w JVector przy użyciu Markerów. Ale nie jest to właściwy sposób. Nadal przechodzę przez dokumentację jvectormap, jeśli jest cokolwiek, jak narysować linię bezpośrednio w jvectormap.
W końcu próbowałem wdrożyć funkcjonalność dodawania linii do JVectorMap. Rozwiązanie z SVG jest w porządku, ale nie działa z Zoom, Move i Panzoom.Dlatego dodałem bezpośrednio do JVectorMap opcję określenia linii, podobnie jak regiony i znaczniki. Możesz sprawdzić status żądania wyciągania https://github.com/bjornd/jvectormap/pull/431, gdzie wszystko jest uwzględnione. Teraz można narysować linię za pomocą
var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];
Nadal wyciągnąć wniosek musi być zawarte w nowej wersji jvectormap, nadzieję, że autor zrobi to wkrótce :) Kod robocza jest w moim osobisty blog tutaj: https://sevenhillsaway.com/map/