ปรับขนาดภาพไอคอนเครื่องหมายของ Google Maps


141

เมื่อฉันโหลดรูปภาพลงในคุณสมบัติไอคอนของเครื่องหมายมันจะแสดงด้วยขนาดดั้งเดิมซึ่งใหญ่กว่าที่ควรจะเป็น

ฉันต้องการปรับขนาดเป็นมาตรฐานให้เล็กลง วิธีที่ดีที่สุดในการทำเช่นนี้คืออะไร?

รหัส:

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"
  });
}

คำตอบ:


317

หากขนาดดั้งเดิมคือ 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
});

นี่คือวิธีดำเนินการภายใต้ API v3
Dean_Wilson

scaledSizeแทนที่scale= love
ผลิตใน Moon

ตรวจสอบให้แน่ใจว่าได้บิดตัวด้วยจุดยึดเพื่อจัดแนวไอคอนให้ตรงกับตำแหน่ง
bluedot

64

ดังที่ได้กล่าวไว้ในความคิดเห็นนี่เป็นโซลูชันที่ได้รับการอัปเดตโดยใช้ไอคอนวัตถุพร้อมเอกสารประกอบ

ใช้วัตถุไอคอน

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
 });

12
MarkerImage เลิกใช้แล้ว: ใช้ไอคอนไอเท็มแทน!
Bertaud

8
สิ่งนี้ไม่ปรับขนาดภาพ แต่ครอบตัดหรือไม่
Luis A. Florit

การใช้งานicon objectและscaledSize: new google.maps.Size(h, w)คุณสมบัติของวัตถุนั้น
Sverrir Sigmundarson

2
@SverrirSigmundarson ไม่ควรnew google.maps.Size(w, h)h, w
Ravi Ram

@RaviRam แน่นอนคุณพูดถูกต้องขอบคุณสำหรับการแก้ไขนี้
Sverrir Sigmundarson

14

MarkerImage เลิกใช้แล้วสำหรับไอคอน

จนถึงเวอร์ชัน 3.10 ของ API ของ Google แผนที่ JavaScript ไอคอนที่ซับซ้อนถูกกำหนดเป็นวัตถุ MarkerImage ไอคอนวัตถุตามตัวอักษรถูกเพิ่มใน 3.10 และแทนที่ MarkerImage จากรุ่น 3.11 เป็นต้นไป ไอคอนวัตถุตัวอักษรรองรับพารามิเตอร์เดียวกับ MarkerImage ช่วยให้คุณสามารถแปลง MarkerImage เป็นไอคอนได้โดยการลบคอนสตรัคเตอร์การตัดพารามิเตอร์ก่อนหน้านี้เป็น {} และเพิ่มชื่อของแต่ละพารามิเตอร์

รหัสของ Phillippe จะเป็นดังนี้:

 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
 });

3
ฉันคิดว่านี่ไม่ได้ปรับขนาดภาพ แต่ตัดภาพ
Luis A. Florit

9
คุณต้องการมากกว่าscaledSize size
bbodenmiller

ใช่เห็นด้วยกับ @bbodenmiller ขนาดที่ปรับอาจเป็นสิ่งที่คุณกำลังมองหา สำหรับโครงการของฉันฉันใช้ scaledSize และเหมาะกับฉัน ไอคอน var = {url: imageName, scaledSize: new google.maps.Size (8, 12)};
user908645

7

ลบจุดเริ่มต้นและจุดยึดจะเป็นภาพปกติมากขึ้น

  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
 });

สิ่งนี้ได้ผลสำหรับฉัน! หากฉันพยายามตั้งค่าพารามิเตอร์ scaledImage ภายในรหัส Marker มันจะไม่ทำงาน
Dumber_Texan2

1

ผู้เริ่มต้นที่สมบูรณ์เช่นตัวฉันในหัวข้ออาจพบว่าการใช้คำตอบอย่างใดอย่างหนึ่งเหล่านี้ยากกว่าการควบคุมการปรับขนาดภาพด้วยตัวแก้ไขแบบออนไลน์หรือโปรแกรมตกแต่งภาพเช่น Photoshop

ภาพขนาด 500x500 จะปรากฏบนแผนที่ใหญ่กว่าภาพขนาด 50x50

ไม่จำเป็นต้องเขียนโปรแกรม


1

ดังนั้นฉันเพิ่งมีปัญหาเดียวกันนี้ แต่แตกต่างกันเล็กน้อย ฉันมีไอคอนเป็นวัตถุตามที่Philippe Boissonneaultแนะนำ แต่ฉันใช้ภาพ SVG

สิ่งที่แก้ไขได้สำหรับฉันคือ:
เปลี่ยนจากภาพ SVG เป็น PNG และติดตามCatherine Nyoว่ามีภาพที่มีขนาดใหญ่เป็นสองเท่าของสิ่งที่คุณจะใช้


0

หากคุณใช้ vue2-google-maps อย่างฉันรหัสเพื่อกำหนดขนาดจะเป็นดังนี้:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.