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

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

Answer 2

正如评论中所提到的，这是更新的解决方案，有利于带有文档的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
 });

Answer 3

MarkerImage has been deprecated for Icon

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

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

像我这样的完全初学者可能会发现实施其中一个答案比使用在线编辑器或照片编辑器（如Photoshop）自己调整图像更难实现其中一个答案。

500x500图像在地图上的显示尺寸将大于50x50图像。

无需编程。

Answer 6

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

为我解决的是：
从SVG图像切换到PNG，并按照 Catherine Nyo 进行操作，使图像的大小翻倍。

Answer 7

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

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

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

7 个答案: