2013-04-03 13 views
7

मैं यह सत्यापित करने की कोशिश कर रहा हूं कि jvectormap का उपयोग करके मानचित्र पर मार्करों के बीच रेखाएं खींचना संभव है या नहीं। http://i.imgur.com/p1Zypv3.gifjvectormap: मार्करों के बीच रेखाएं खींचे?

किसी ने मुझे एक संकेत दे सकते हैं अगर यह संभव है और यदि ऐसा है तो कैसे:

यहाँ मैं क्या हासिल करने की कोशिश कर रहा हूँ की एक विचार है?

किसी भी इनपुट की सराहना करते हुए।

उत्तर

3

यह जेवेक्टोमैप के संयोजन के साथ किया जा सकता है, जेवीक्टॉर्मैप्स कनवर्टर विधि latLngToPoint() और जेवीक्टॉर्मैप के शीर्ष पर एक एसवीजी परत समन्वय करता है। वास्तव में, Jvectormap के शीर्ष पर एक परत के रूप में SVG.js का उपयोग करने से आप अक्षांश-देशांतर निर्देशांक के साथ बिंदुओं को प्रतिस्थापित करते समय एसवीजी के साथ कुछ भी कर सकते हैं।

पेज हेडर में आपको Jvectormap, Jvectormap मैप फ़ाइल, svg.js, और svg.path.js प्लगइन (https://svgdotjs.github.io देखें) लोड करने की आवश्यकता होगी। आपको एक में दो divs बनाने की भी आवश्यकता होगी जो सीएसएस पूर्ण सेटिंग्स के साथ ओवरलैप कर सकते हैं।

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

नक्शे पर करने के लिए और से लाइनों ड्राइंग के लिए अक्षांश और देशांतर के साथ मार्कर की एक सरणी बनाएँ:

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

:

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

फिर ऊपर मार्कर का उपयोग अपने Jvectormap की स्थापना अंत में, अपने मानचित्र को ऑब्जेक्ट के रूप में याद करें, अपनी एसवीजी परत बनाएं, लैट-लम्बा निर्देशांक को 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); 

इनमें से अधिकांश जेएस को $(function() कॉल या $(document).ready(function() ब्लॉक शुरू करने के लिए जाना चाहिए।

आप अधिक जानकारी के लिए इस JSFiddle देख सकते हैं: http://jsfiddle.net/ruzel/V8dyd/

अस्वीकरण: मैं नहीं जानता कि क्या ज़ूमिंग के साथ होता है; यह इस उदाहरण के लिए बंद कर दिया गया है।

-1

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

0

तो मैं @russellmania जवाब बाहर कोशिश कर रहे हैं। यह काम करता है, हालांकि केवल एसवीजी संस्करण के साथ, जो jsfiddle लिंक में शामिल है। अगर मैंने एसवीजी के वास्तविक संस्करण के साथ एक ही कोड की कोशिश की है, तो यह एसवीजी पर दुर्घटनाग्रस्त हो जाता है "यह .clear (...)। Attr" फ़ंक्शन परिभाषित नहीं किया गया है। हालांकि, मेरे लिए, मैं चाहता था कि जेवीक्टर ज़ूमिंग और चलती कार्यक्षमता को मानचित्र बना रहा हो। लेकिन मानचित्र पर एसवीजी परत के साथ, यह काम नहीं करता है। या कहें, 2 विकल्प हैं: 1) चलती और ज़ूमिंग अक्षम करें (मुझे यह नहीं चाहिए) 2) ज़ूमिंग, मूविंग सक्षम करें, लेकिन फिर एसडब्ल्यूजी परत ज़ूम नहीं करता है और जेवीक्टर के समान स्थानांतरित करता है, इसलिए पथ से विलुप्त हो जाता है नक्शा :)

मुझे मार्करों का उपयोग करके जेवीक्टर में रेखा खींचने का एक तरीका मिला। लेकिन यह सही तरीका नहीं है। इसलिए मैं अभी भी jvectormap दस्तावेज के माध्यम से जा रहा हूं, अगर jvectormap में सीधे रेखा खींचने के लिए कुछ भी है।

1

अंततः मैंने JVectorMap में लाइन्स जोड़ने की कार्यक्षमता को लागू करने का प्रयास किया। एसवीजी के साथ समाधान ठीक है, लेकिन ज़ूम, मूव और पैनज़ूम के साथ काम नहीं करता है।तो मैंने क्षेत्र और मार्करों के समान लाइनों को निर्दिष्ट करने के लिए JVectorMap को सीधे जोड़ा। आप पुल अनुरोध https://github.com/bjornd/jvectormap/pull/431 की स्थिति की समीक्षा कर सकते हैं जहां सबकुछ शामिल है। अब आप उम्मीद लेखक यह जल्द ही करेंगे,

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

फिर भी, पुल अनुरोध jvectormap के नए संस्करण में शामिल किया जाना चाहिए का उपयोग कर लाइन आकर्षित कर सकते हैं :) काम कर कोड मेरी personnal ब्लॉग पर यहाँ है: https://sevenhillsaway.com/map/

संबंधित मुद्दे