গুগল ম্যাপস চিহ্নিতকারী আইকন চিত্রটি পুনরায় আকার দিন

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

এটি এপিআই ভি 3 এর অধীনে কীভাবে করবেন।

— ডিন_উইলসন

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

মার্কার ইমেজ অবহেলা করা হয়েছে: পরিবর্তে আইকন অবজেক্টটি ব্যবহার করুন!

— বার্টাউড

এটি চিত্রটির আকার পরিবর্তন করে না, তবে তা ফসল দেয়?

— লুইস এ। ফ্লোরিট

ব্যবহার icon objectএবং সেই scaledSize: new google.maps.Size(h, w)বস্তুর সম্পত্তি

— Sverrir Sigmundarson

@ সার্রিরসিগমুন্দরসন এটি হওয়া উচিত new google.maps.Size(w, h)নয়, ডাব্লু

— রবি রাম

@ রাভিরাম সত্যিই আপনি ঠিক বলেছেন , এই সংশোধন করার জন্য আপনাকে ধন্যবাদ।

— সোভেরির সিগমুন্দরসন

Answer 3

আইকনের জন্য মার্কার আইমেজ অবহেলা করা হয়েছে

গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর সংস্করণ 3.10 অবধি জটিল আইকনগুলি মার্কারইমেজ অবজেক্ট হিসাবে সংজ্ঞায়িত করা হয়েছিল। আইকন অবজেক্ট আক্ষরিক 3.10 এ যুক্ত হয়েছিল এবং সংস্করণ 3.11 থেকে মার্কার ইমেজ প্রতিস্থাপন করেছে। আইকন অবজেক্ট ল্যাটারালগুলি মার্কার আইমেজ হিসাবে একই পরামিতিগুলিকে সমর্থন করে, আপনাকে সহজেই কনস্ট্রাক্টরটিকে মুছে ফেলে, পূর্ববর্তী পরামিতিগুলি {} এর মধ্যে মোড়ানো করে এবং প্রতিটি পরামিতির নাম যুক্ত করে একটি মার্কার আইমেজকে আইকনে রূপান্তর করতে দেয়।

ফিলিপির কোডটি এখন হবে:

 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

হ্যাঁ @ বিডোইনমিলারের সাথে একমত, স্কেলাইড সাইজ আপনি যা খুঁজছেন তা হতে পারে। আমার প্রকল্পের জন্য আমি স্কেল্ড সাইজ ব্যবহার করি এবং এটি আমার পক্ষে কাজ করে। var আইকন = {url: চিত্রের নাম, স্কেলড সাইজ: নতুন google.maps.Size (8, 12)};

— ব্যবহারকারী 908645

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

এটি আমার পক্ষে কাজ করেছিল! যদি আমি চিহ্নিতকারী কোডের মধ্যে স্কেলড ইমেজ প্যারামিটার সেট করার চেষ্টা করি তবে এটি কার্যকর হবে না।

— ডम्बर_টেক্সান 2

Answer 5

বিষয়টির মতো আমার মতো একজন সম্পূর্ণ শিক্ষানবিশ, আপনার নিয়ন্ত্রণের মধ্যে থাকলে, এই ছবিটির কোনও অনলাইন সম্পাদক বা ফটোশপের মতো ফটো এডিটর দিয়ে চিত্রটি পুনরায় আকার দেওয়ার চেয়ে এই উত্তরগুলির একটি প্রয়োগ করা আরও কঠিন হতে পারে ।

একটি 500x500 চিত্র 50x50 চিত্রের চেয়ে মানচিত্রে বৃহত্তর প্রদর্শিত হবে।

কোন প্রোগ্রামিং প্রয়োজন।

Answer 6

সুতরাং আমি ঠিক এই একই সমস্যা ছিল, কিন্তু কিছুটা আলাদা। ফিলিপ বোইসনিয়েল্টের পরামর্শ অনুসারে আমার কাছে ইতিমধ্যে আইকনটি ছিল , তবে আমি একটি এসভিজি চিত্র ব্যবহার করছিলাম।

এটি আমার জন্য কী সমাধান হয়েছিল তা হ'ল:
কোনও এসভিজি চিত্র থেকে পিএনজিতে স্যুইচ করুন এবং ক্যাথরিন নিয়োকে এমন কোনও চিত্র রাখুন যা আপনি কী ব্যবহার করবেন তার দ্বিগুণ।

Answer 7

আপনি যদি আমার মতো vue2-google- মানচিত্র ব্যবহার করে থাকেন তবে আকার নির্ধারণের কোডটি দেখতে এই জাতীয় দেখাচ্ছে:

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