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


141

当我将图像加载到标记的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"
  });
}

Answers:


317

如果原始尺寸为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下执行此操作的方法。
Dean_Wilson

scaledSize而不是scale=爱
造于月球

确保与锚点一起旋转,以将图标正确对准该位置。
bluedot '17

64

如评论中所述,这是支持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
 });

12
MarkerImage已过时:请改用icon对象!
Bertaud

8
这不会调整图像大小,但会裁剪吗?
Luis A. Florit 2014年

该对象的使用icon objectscaledSize: 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已弃用Icon

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

3
我认为这不会调整图像的大小,而是对其进行裁剪。
Luis A. Florit 2014年

9
你要scaledSize而不是size
bbodenmiller 2014年

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

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

这对我有用!如果尝试在Marker代码中设置scaledImage参数,它将无法正常工作。
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 },
  }"
>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.