Google मानचित्र मार्कर आइकन छवि का आकार बदलें

Question

जब मैं किसी चित्र को मार्कर के आइकन गुण में लोड करता हूं तो यह अपने मूल आकार के साथ प्रदर्शित होता है, जो कि इससे बहुत बड़ा है।

मैं छोटे आकार के मानक का आकार बदलना चाहता हूं। इसे करने का बेहतरीन तरीका क्या है?

कोड:

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}

Answer 1

यदि मूल आकार 100 x 100 है और आप इसे 50 x 50 के पैमाने पर रखना चाहते हैं, तो आकार के बजाय स्केल्डाइज़ का उपयोग करें।

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

Comments

यह एपीआई v3 के तहत कैसे करना है।

— डीन_विलसन

scaledSizeइसके बजाय scale= प्यार

— मेड इन मून

स्थान पर आइकन को सही ढंग से संरेखित करने के लिए एंकर बिंदुओं के साथ जुड़ाव सुनिश्चित करें।

— bluedot

Answer 2

जैसा कि टिप्पणियों में बताया गया है, यह प्रलेखन के साथ आइकन ऑब्जेक्ट के पक्ष में अद्यतन समाधान है।

आइकन ऑब्जेक्ट का उपयोग करें

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });

Comments

MarkerImage पदावनत है: इसके बजाय आइकन ऑब्जेक्ट का उपयोग करें!

— बर्टौद

यह छवि को आकार नहीं देता है, लेकिन इसे फसल देता है?

— लुइस ए। फ्लोरिट

उस वस्तु पर संपत्ति का उपयोग करें icon objectऔरscaledSize: new google.maps.Size(h, w)

— Sverrir Sigmundarson

@SverrirSigmundarson यह new google.maps.Size(w, h)ज नहीं होना चाहिए , w

— रवि राम

@RaviRam वास्तव में आप सही हैं , इस सुधार के लिए धन्यवाद।

— सेवरर सिगमंडर्सन

Answer 3

चिह्न के लिए मार्करमेज को हटा दिया गया है

Google मैप्स जावास्क्रिप्ट एपीआई के संस्करण 3.10 तक, जटिल आइकनों को मार्करमेज ऑब्जेक्ट्स के रूप में परिभाषित किया गया था। आइकन ऑब्जेक्ट शाब्दिक 3.10 में जोड़ा गया था, और इसके बाद संस्करण 3.11 से मार्करमेज की जगह लेता है। चिह्न ऑब्जेक्ट शाब्दिकताएं MarkerImage के समान मापदंडों का समर्थन करती हैं, जिससे आप आसानी से एक MarkerImage को कंस्ट्रक्टर को हटाकर, {} के पिछले मापदंडों को लपेटकर, और प्रत्येक पैरामीटर के नामों को जोड़कर एक चिह्न बनाने की अनुमति देते हैं।

फ़िलिप का कोड अब होगा:

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     origin: new google.maps.Point(0,0), // origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });

Comments

मुझे लगता है कि यह छवि को आकार नहीं देता है, लेकिन इसे फसल देता है।

— लुइस ए। फ्लोरिट

आप scaledSizeइसके बजाय चाहते हैं size।

— bbodenmiller

हाँ @bbodenmiller से सहमत हूँ, स्केल्डाइज़ वह हो सकता है जिसे आप ढूंढ रहे हैं। अपने प्रोजेक्ट के लिए मैं स्केल्डसाइज़ का उपयोग करता हूं और जो मेरे लिए काम करता है। var आइकन = {url: imageName, scaledSize: new google.maps.Size (8, 12)};

— user908645

Answer 4

मूल हटाएं और लंगर अधिक नियमित चित्र होगा

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });

Comments

यह मेरे लिए काम किया! अगर मैंने मार्कर कोड के अंदर स्केलेडइमेज पैरामीटर सेट करने की कोशिश की, तो यह काम नहीं करेगा।

— Dumber_Texan2

Answer 5

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

500x500 की छवि 50x50 छवि की तुलना में मानचित्र पर बड़ी दिखाई देगी।

कोई प्रोग्रामिंग की आवश्यकता है।

Answer 6

इसलिए मेरे पास बस यही मुद्दा था, लेकिन थोड़ा अलग था। मेरे पास पहले से ही आइकॉन के रूप में एक वस्तु थी जैसा कि फिलिप बोइसनोटल्ट सुझाव देता है, लेकिन मैं एक एसवीजी छवि का उपयोग कर रहा था।

यह मेरे लिए क्या हल किया गया था:
एक SVG छवि से PNG पर स्विच करना और एक कैथरीन Nyo का अनुसरण करना एक छवि होने पर जो आप उपयोग करेंगे उसका आकार दोगुना है।

Answer 7

यदि आप मेरे जैसे vue2-google-map का उपयोग कर रहे हैं, तो आकार सेट करने का कोड इस तरह दिखता है:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>