调整谷歌地图标记图标图像的大小

Question

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

我想将标准尺寸调整为较小的尺寸。最好的方法是什么?

代码:

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

Answer 2

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

使用图标对象

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

Answer 3

图标已弃用标记图像

直到3.10版本的谷歌地图JavaScript API，复杂的图标被定义为MarkerImage对象。添加了Icon对象文字并从3.11版本开始替换MarkerImage。图标object字面量支持与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
 });

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

Answer 5

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

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

Answer 6

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

解决这个问题的方法是:
从SVG图像切换到PNG图像，并遵循Catherine Nyo，有一个图像是你将要使用的大小的两倍。

Answer 7

对于这个话题，像我这样的完全初学者可能会发现实现这些答案中的一个比，如果在你的控制范围内，自己调整图像的大小使用在线编辑器或照片编辑器(如Photoshop)。

500x500的图像会比50x50的图像在地图上显示得更大。

无需编程