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

- Golan_trevize

Answer 1

如果原始大小为100 x 100，而您想将其缩放为50 x 50，请使用scaledSize而不是Size。

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

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

- Catherine Nyo

---

这是在 API v3 下如何操作的方法。 - Dean_Wilson

缩放大小（scaledSize）代替 缩放（scale）= 爱 - Made in Moon

请务必调整锚点以正确对齐图标到指定位置。 - bluedot

您不必设置anchor和origin，它们是可选的。只有在使用sprite时才需要使用origin，我猜这很少见。而anchor的位置默认在底部中间，因为大多数标记看起来都是这样的。如果您将其定义为0,0，则左上角是核心位置。最好只是将这两个选项都省略掉？ - Adam

Answer 2

如评论中所述，这是支持带有文档的图标对象的更新解决方案。

使用Icon object。

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

- Philippe Boissonneault

---

MarkerImage已被弃用：请改用icon对象！ - Bertaud

这并不会改变图片的尺寸，而是裁剪它？ - Luis A. Florit

Þ»ÀÕ£¿icon objectõ©èõ¢┐þö¿scaledSize: new google.maps.Size(h, w)Õ▒׵ǺÒÇé - Sverrir Sigmundarson

@SverrirSigmundarson 应该是 new google.maps.Size(w, h) 而不是 h，w。 - Ravi Ram

@RaviRam 确实你是对的，感谢您的纠正。 - Sverrir Sigmundarson

Answer 3

MarkerImage已经被弃用，使用Icon替代

在Google Maps JavaScript API的3.10版本之前，复杂图标使用MarkerImage对象定义。从3.10版本开始添加了Icon对象字面量，用于取代MarkerImage，Icon对象字面量支持与MarkerImage相同的参数，可以通过删除构造函数、将先前的参数包装在{}中并添加每个参数的名称来轻松将MarkerImage转换为Icon。

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

- Jono

---

我认为这并不是改变图片大小，而是裁剪它。 - Luis A. Florit

使用scaledSize而不是size。 - bbodenmiller

是的，我同意@bbodenmiller的看法，scaledSize可能是你正在寻找的。在我的项目中，我使用scaledSize，这对我很有效。var icon = { 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
 });

- ibyanik

---

这对我有用！如果我尝试在标记代码内设置scaledImage参数，它将无法工作。 - Dumber_Texan2

它运行了！2021年！！！ - AwesomeUserName

Answer 5

如果您像我一样使用vue2-google-maps，设置尺寸的代码如下：

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

- Wolle

Answer 6

所以我刚刚遇到了同样的问题，但有点不同。如Philippe Boissonneault所建议的，我已经将图标作为对象使用，但我正在使用SVG图像。

对我有用的解决方法是：
从SVG图像切换到PNG，并按照Catherine Nyo的建议使用比实际使用大小大两倍的图像。

- jumper

Answer 7

像我这样的完全初学者可能会发现实施这些答案比使用在线编辑器或像Photoshop这样的照片编辑器自己调整图像大小更难。

500x500像素的图像在地图上看起来比50x50像素的图像更大。

无需编程。

- bearacuda13