调整 Google 地图标记图标图像的大小

Posted 2023-03-27

【中文标题】调整 Google 地图标记图标图像的大小

【英文标题】：Resize Google Maps marker icon image

【发布时间】：2013-02-12 08:05:59

【问题描述】：

当我将图像加载到标记的图标属性中时，它会以其原始大小显示，这比应有的大很多。

我想将标准尺寸调整为更小的尺寸。做这个的最好方式是什么？

代码：

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

【参考方案1】：

如果原始尺寸是 100 x 100，而您想将其缩放到 50 x 50，请使用 scaledSize 而不是 Size。

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 下的操作方法。

scaledSize 而不是 scale= 爱

一定要旋转锚点以使图标与位置正确对齐。

【参考方案2】：

正如 cmets 中提到的，这是支持带有文档的 Icon 对象的更新解决方案。

使用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
 );

【讨论】：

不推荐使用MarkerImage：改用图标对象！

这不会调整图像大小，而是裁剪它？

在该对象上使用 icon object 和 scaledSize: new google.maps.Size(h, w) 属性

@SverrirSigmundarson 它应该是 new google.maps.Size(w, h) 不是 h, w

@RaviRam Indeed you're right，感谢您的更正。

【参考方案3】：

MarkerImage has been deprecated for Icon

在 Google Maps javascript API 3.10 版之前，复杂图标 被定义为 MarkerImage 对象。添加了 Icon 对象文字 在 3.10 中，并从 3.11 版本开始替换 MarkerImage。图标 对象文字支持与 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
 );

【讨论】：

我认为这不会调整图像大小，而是裁剪它。

你想要scaledSize而不是size。

是的，同意@bbodenmiller，scaledSize 可能是您正在寻找的那个。对于我的项目，我使用 scaledSize 并且对我有用。 var icon = url: imageName, scaledSize: new google.maps.Size(8, 12) ;

【参考方案4】：

删除origin和anchor图片会更规则

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

【讨论】：

这对我有用！如果我尝试在 Marker 代码中设置 scaledImage 参数，它将不起作用。

有效！ 2021！！！

【参考方案5】：

如果你像我一样使用 vue2-google-maps，设置大小的代码如下所示：

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

【参考方案6】：

像我这样的主题完全初学者可能会发现，如果在您的控制范围内，使用在线编辑器或照片编辑器（如 Photoshop）自己调整图像大小，实现这些答案之一更难.

500x500 的图片在地图上会比 50x50 的图片更大。

无需编程。

【参考方案7】：

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

为我解决的问题是： 从 SVG 图像切换到 PNG 图像，然后按照 Catherine Nyo 的方法制作一个两倍于您将使用的图像大小的图像。