Google मानचित्र मार्कर स्प्राइट छवि स्थिति

Question

हम स्प्राइट छवि को Google मानचित्र मार्कर के रूप में कैसे स्थापित कर सकते हैं। उदाहरण के लिए: सीएसएस में हम

background: url('../images/bodycss/pointer.png') 28px -32px; 

अब मैं कैसे नीचे Google API-v3 कार्य करने के लिए ऊपर दिए गए कोड को शामिल कर सकते की तरह छवि स्थिति कर रहे हैं?

function setMarkers(map, markers) { 

    var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png"); 

    for (var i = 0; i < markers.length; i++) { 
     var sites = markers[i]; 
     var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
     var marker = new google.maps.Marker({ 
      position: siteLatLng, 
      map: map, 
      title: sites[0], 
      zIndex: sites[3], 
      html: sites[4], 
      icon: google_image 
     }); 

     google.maps.event.addListener(marker, "mouseover", function() { 
      infowindow.setContent(this.html); 
      infowindow.open(map, this); 
     }); 
    } 
} 

Answer 1

एक स्प्राइट छवि से मार्कर इमेज बनाने के लिए, आपको उस छवि के अनुभाग का मूल और आकार निर्दिष्ट करना होगा जिसे आप आइकन बनाने के लिए उपयोग करना चाहते हैं। इस काम कर Fiddle- DEMO

मैं इस छवि http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4 का इस्तेमाल किया और आकार और बिंदु समायोजित किया है देखें -

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34)); 

आप इस Blog post है कि यह अच्छी तरह से

का वर्णन करता है अद्यतन पर एक नज़र हो सकता है आइकन के लिए मूल्य।

Answer 2

आप एक MarkerImage जो, दस्तावेज के रूप में here डिफ़ॉल्ट स्थिति को ओवरराइड करता है के anchor संपत्ति का उपयोग कर सकते हैं:

स्थान देता है जिसपर पर मार्कर के स्थान पर correspondance में एक छवि को स्थिर करने नक्शा। डिफ़ॉल्ट रूप से, एंकर छवि के निचले भाग के केंद्र बिंदु के साथ स्थित होता है।

पेज। मार्कर इमेज को बहिष्कृत किया गया है, और आपको इसके बजाय icon का उपयोग करने पर विचार करना चाहिए।

Answer 3

पहले MarkerImage वर्ग, (जिसका अर्थ है कि यह अभी भी समर्थित है, लेकिन प्रतिस्थापित किया जाना चाहिए) पदावनत हो गया चिह्न वस्तु के पक्ष में आप एक सरल छवि के लिए कुछ इस तरह लिखा हो सकता है:

var qthIconHouse20 = new google.maps.MarkerImage('grafx/house_icon_20.png', 
            new google.maps.Size(20, 20), 
            new google.maps.Point(0, 0), 
            new google.maps.Point(10, 10)); 

अब, चिह्न वस्तु का उपयोग कर आप इस बारे में होगा:

var qthIconHouse20 = { 
    url:  'grafx/house_icon_20.png', 
    size:  new google.maps.Size(20, 20), 
    origin:  new google.maps.Point(0, 0), 
    anchor:  new google.maps.Point(10, 10), 
    scaledSize: new google.maps.Size(20, 20) 
}; 

नोट अतिरिक्त scaledSize पैरामीटर: सरल छवियों के लिए, यह मूल छवि के आकार है - जो इस विशेष मामले में आकार पैरामीटर के रूप में एक ही है।

var qthIconBlueSpot16 = { 
    url:  'grafx/qth_icon_spots_16.png', 
    size:  new google.maps.Size(16, 16), 
    origin:  new google.maps.Point(0, 32), 
    anchor:  new google.maps.Point(8, 8), 
    scaledSize: new google.maps.Size(16, 48) 
}; 

ध्यान दें कि, इस उदाहरण में, मूल रूप में (0, 32 निर्दिष्ट किया गया है:

स्प्राइट, जहां आप एक ही छवि फ़ाइल में कई छवियों के लिए, आप कुछ इस तरह इस्तेमाल कर सकते हैं) एक 166 16 पिक्सेल छवियों वाले एक स्प्राइट में: इसलिए, हम स्प्राइट में तीसरा छवि का चयन कर रहे हैं। छवि के उस हिस्से के भीतर, हमने एंकर को (8, 8) - यानी छवि के चयनित भाग के मध्य में प्रदर्शित होने के लिए सेट किया है। अंत में, स्केल किए गए आकार में पूरे स्प्राइट छवि के आकार को संदर्भित किया गया है।