रामबलर मैप्स में जियोमेट्रिक ऑब्जेक्ट और बलून

जो लोग पहले से ही अन्य डेवलपर्स के एपीआई मैप्स का उपयोग कर चुके हैं, मुझे लगता है कि रामबर्ल मैप्स एपीआई का आसानी से पता लगा सकते हैं। कक्षाओं और विधियों का सेट काफी मानक और स्पष्ट है।

प्रलेखन यहाँ पाया जा सकता है: http://maps.rambler.ru/api/docs ।

ज्यामितीय वस्तुओं को यह दिखाने के लिए कि डिफ़ॉल्ट रूप से भिन्न क्या है, हम एक सरल समस्या को हल करेंगे। चलो मॉस्को के प्राचीन क्षेत्रों का एक नक्शा बनाते हैं, ताकि जब आप किसी विशेष क्षेत्र पर मंडराते हैं तो इसे रंगीन बहुभुज के साथ हाइलाइट किया जाता है, और बाएं क्लिक के साथ, इसके बारे में थोड़ी जानकारी के साथ एक गुब्बारा खुलता है।

1. एक नक्शा बनाएँ। यह सरल है: हम कंटेनर पैरामीटर सेट करते हैं

<div id="myMap" style="width:800px;height:600px;"></div> 

... और इसमें मानचित्र मानचित्र डालें - आरएमएपी वर्ग का एक उदाहरण।

 // ,       var map = new RMap('myMap', { //   center: {"lon":37.62074982031279,"lat":55.75337144909794} , zoom: 13, //    styles: { //   Marker: {style: {display: "none"}} }, //dragging: false,    ... //zooming: false,   :       widgets: false, //    controls: false //   }); //     var balloonStyle = { arrowAngle: -30, arrowLength: 20, arrowWidth: 20, backgroundColor: "#00f", backgroundOpacity: 0.75, bindIndex: 3, bindPlace: "50%", borderColor: "white", borderOpacity: 0, borderSize: 0, padding: "10px" }; //      var balloonTmpl = '<p style="color:white;font-size:13px;"><strong style="font-size:15px">${name}</strong> ${desc}</p>'; 

2. अब उन क्षेत्रों, उनकी सीमाओं (बहुभुजों के निर्माण के लिए बिंदु) और मानचित्र पर प्रदर्शन रंग: लाल - क्रेमलिन, पीला - चीन-शहर, सफेद - सफेद शहर और भूरा - पृथ्वी शहर के बारे में जानकारी के साथ चर क्षेत्रों का निर्माण करें। अंतरिक्ष को बचाने के लिए, अब हम केवल क्रेमलिन का वर्णन करते हैं, और लेख के अंत में एक पूर्ण उदाहरण पाया जा सकता है।

 //    var areas = { // kremlin: { name: "", desc: "—   ,  ..  ..", background: "#FF0000", points: [ {"lon":37.61318805816646,"lat":55.74786393721869}, {"lon":37.611128121643006,"lat":55.74931626156693}, {"lon":37.616106301574696,"lat":55.75614145874745}, {"lon":37.62232902648932,"lat":55.7526806043867}, {"lon":37.62374523284919,"lat":55.749606719921196}, {"lon":37.6174366772461,"lat":55.74895318557001} ] }, … //     }; 

3. अगला, एक फ़ंक्शन बनाएं जो क्षेत्र के बहुभुज की उपस्थिति को 0.15 की पारदर्शिता के साथ पूरी तरह से दिखाई देगा (पारदर्शिता = 0.5) और इसके विपरीत। ऐसा करने के लिए, बहुभुज वर्ग के सेट दृश्य विधि का उपयोग करें।

 //       function toggle(area, doShow) { //    ,     if(area.hasBalloon) return; //      area.polygon.setView({ style: { backgroundOpacity: doShow ? 0.5 : 0.15 } }); }; //- function show(area) { toggle(area, true); } function hide(area) { toggle(area, false); } 

4. अगला, क्षेत्रों को प्रदर्शित करने के लिए एक फ़ंक्शन बनाएं। यह पॉलीगॉन बनाता है और उनसे हैंडलर जोड़ता है जो आपके ऊपर मंडराने पर बहुभुज की पारदर्शिता को बदल देगा, और जब आप इसे वापस लेते हैं, तो इसे इसकी मूल स्थिति (अदृश्य) पर लौटा दें। बहुभुज पर क्लिक करने पर क्लिक के स्थान पर सूचना विंडो (तथाकथित गुब्बारा) खुलेगी। गुब्बारे की सामग्री और इसकी बहुत उपस्थिति उस स्थान पर निर्भर करती है जहां माउस क्लिक किया गया था: यदि आप बहुभुज के बाहर प्रहार करते हैं, तो कुछ भी नहीं होना चाहिए।

 //     for(var k in areas) { prepareArea(areas[k]); } function prepareArea(area) { //      area.polygon = map.geometry.create("polygon", { points: area.points, style: { lineWidth: 0, //   background: area.background, //    backgroundOpacity: 0 //    } }, true); //   /  area.polygon.on('mouseover', function(evt) { show(area); }); area.polygon.on('mouseout', function(evt) { hide(area); }); //  —   area.polygon.on('lclick', function(evt){ //   map.geometry.remove("marker"); for(var k in areas) areas[k].hasBalloon = false; //  ,   for(var k in areas) if(areas[k] !== area) hide(areas[k]); //      ( showBalloon   ) showBalloon(area, { x: evt.x, y: evt.y }); }); //     if(area.balloonAt) showBalloon(area, area.balloonAt); } 

5. और - वसीला: वह कार्य जो बलून को खोलता है।

 function showBalloon(area, crd) { //  var mrkr = map.geometry.create("marker", { coord: map.makeCoord(crd) }, true); //    mrkr.addBalloon({ style: balloonStyle, closeButton: true, content: { name: area.name, desc: area.desc }, template: balloonTmpl }, true); //     —    mrkr.balloon.on('hide', function(evt) { area.hasBalloon = false; for(var k in areas) hide(areas[k]); }); show(area); area.hasBalloon = true; } 

आप परिणाम को देख सकते हैं और यहां पूर्ण स्रोत कोड का पता लगा सकते हैं ।