Google मानचित्र API (कस्टम लेबल और टूलटिप्स)

सभी को नमस्कार!
नक्शे के बारे में, सैंडबॉक्स लिंक में बस एक नया विषय देखा।
मैं Google कार्ड के साथ संवाद करने में अपने अनुभव के साथ इसे पूरक करने का प्रयास करूंगा।

प्रस्तावना

एक परियोजना है जिसमें ग्राहक Google मानचित्र को कनेक्ट करना चाहता है, जबकि कार्ड में डिज़ाइन तत्वों का उपयोग बिना असफल होना चाहिए। हो सकता है कि मैंने खराब खोज की, लेकिन न तो दस्तावेज़ीकरण में और न ही इंटरनेट पर मुझे मानचित्र पर कस्टम तत्वों के निर्माण पर अधिक या कम योग्य प्रकाशन मिले। केवल कार्ड कैसे कनेक्ट करें और मार्कर को इनिशियलाइज़ कैसे करें, इसका केवल एक विवरण।

उसी समय, Google मैप्स एक्सटेंशन का अधिकांश हिस्सा Google मैप API v2 के लिए था, जिसे अभी भी आपकी साइट में मैप्स को एकीकृत करने के लिए एक कुंजी की आवश्यकता थी।

लेबल

मैं मार्करों के साथ शुरू करूँगा - कम या ज्यादा आपके पास मानचित्र पर अपने कस्टम मार्कर डालने का अवसर होगा।
कस्टम मार्कर द्वारा, मैं मार्कर के लिए किसी भी चित्र पाठ और शैलियों को सेट करने की क्षमता को समझता हूं।

तस्वीर के साथ, सब कुछ काफी सरल है। पहली बात जो मुझे पता चली वह थी यह सेवा।
सब कुछ बहुत सरल है - हम एक तस्वीर का चयन करते हैं - हमें एक कोड मिलता है। थोड़ा खेलने के बाद मैं कर सकता था: एक मार्कर के लिए होवर
उदाहरण के लिए, यदि मार्कर ग्रे है और जब आप इसे इंगित करते हैं तो यह नीला हो जाता है।

new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,0),
new google.maps.Point(0,33)
);

* This source code was highlighted with Source Code Highlighter .

एपीआई

मार्करैमेज (url: string, size ?: size, Origin ?: Point, anchor ?: Point, scaledSize ?: size)

मेरे उदाहरण में:
- पहला पैरामीटर चित्र का पथ है
- हमारे मार्कर के पिक्सल में आकार
- मार्कर पिक्चर पोजिशनिंग (मान लें कि एक स्क्वायर मार्कर 33px है, और पिक्चर 33x66 - दो स्टेट्स सामान्य हैं और स्टेट है: hover)
- मार्कर का केंद्र (0, 33) - निचले बाएं कोने। (0, 17) निचला केंद्र, आदि।

ऐसा करने के लिए: मार्कर के लिए होवर करें - आप मार्कर पर हैंडलर लगा सकते हैं

एक उदाहरण

var myLatlng = new google.maps.LatLng(50.022451, 36.227070);
var myOptions = {
zoom: 10,
scrollwheel: false ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
}
var map = new google.maps.Map( document .getElementById( "map_canvas" ), myOptions);

var markerImage = new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,0),
new google.maps.Point(0,33)
);
var markerImageHover = new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,33),
new google.maps.Point(0,33)
);

var marker = new google.maps.Marker({
icon: markerImage,
position: myLatlng,
map: map,
title: "Hello World!"
});

google.maps. event .addListener(marker, 'mouseover' , function () {
marker.setIcon(markerImageHover);
});

google.maps. event .addListener(marker, 'mouseout' , function () {
marker.setIcon(markerImage);
});

* This source code was highlighted with Source Code Highlighter .

पहली समस्याएं

इससे पहले जो कुछ था वह सब अच्छा है, लेकिन पेज पर एक दर्जन ऐसे मार्कर होंगे और आपको मार्करों को नंबर या साइन करना होगा।

दो विकल्प हैं - पहले से लागू पाठ के साथ एक मार्कर के लिए एक तस्वीर का उपयोग करने के लिए
कुछ इस तरह:

for ( var i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage( 'marker' + i + '.png' ,
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
}

* This source code was highlighted with Source Code Highlighter .

दूसरी विधि जो एक अन्य Google सेवा Google के चार्ट एपीआई का उपयोग करती है। विशेष रूप से गतिशील प्रतीक में ।

var links = [];
for ( var i = 1; i < 3; i++) {
link.push( 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=' + i + '|FF0000|000000' );
};

console.log(link); //[ "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000" , "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=2|FF0000|000000" , "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000" ]

* This source code was highlighted with Source Code Highlighter .

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

सामान्य तौर पर, मेरे लिए आउटपुट एक कस्टम टूलटिप था।

Google मानचित्र पर टूलटिप्स

टूलटिप्स - यह उस मार्कर के बगल में दिखाई देता है जब आप उस पर हॉवर / क्लिक करते हैं।
Google API इसके लिए InfoWindow का उपयोग करता है ।

var infowindow = new google.maps.InfoWindow({
content: 'Hello world'
});

* This source code was highlighted with Source Code Highlighter .

मुख्य विकल्प:
अक्षम करेंऑप्टान बूलियन - टूलटिप प्रकट होने के बाद कार्ड या तो उस पर केंद्रित है या नहीं
maxWidth px विंडो का आकार
सामग्री सामग्री - टूलटिप में क्या दिखाया जाएगा। यह HTML से जावास्क्रिप्ट तक कुछ भी हो सकता है।

var content = document .createElement( 'div' );
content.innerHTML = "<strong>Hello world</strong> + JS ^_^" ;
var infowindow = new google.maps.InfoWindow({
content: content
});

google.maps. event .addListener(marker, 'click' , function () {
infowindow.open(map, marker);
});

* This source code was highlighted with Source Code Highlighter .

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

मैं भी इस तरह के एक संकलन पर ठोकर खाई, यहाँ कार्ड के लिए 2 प्लग-इन हैं।

दरअसल, लेबल प्लगइन समाप्त करने के बाद, मुझे अपनी Google मानचित्र सेवा को वरीयता और लड़कियों के साथ, कस्टम मार्कर और कार्ड के लिए एक कस्टम टूलटिप दोनों बनाने का अवसर मिला।

उदाहरण:

मार्कर बज़ पाठ + नियमित टूलटिप
मेरा रिवाज (बहुत ज्यादा फायर न करने के लिए, मैंने आधी स्टाइल हटा दी)

संग्रह

कोड अच्छा होने का नाटक नहीं करता है + सबसे अधिक संभावना है कि अंतिम रूप देने के लिए कुछ है, लेकिन यह काम करता है और इसलिए उसके लिए धन्यवाद।

PS लेख पहले से ही बहुत बड़ा है, इसलिए मैं संग्रह में कोड को पार्स नहीं कर सकता। हां, और यह काम छोड़ने का समय है।

PSS आलोचना करना शुरू करें, अपना अनुभव साझा करें और किक करें