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

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

我想调整到一个更小的尺寸标准。什么是最好的办法做到这一点？

密码:

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"
});
}
275774 次浏览
小开

正如注释中提到的，这是更新后的解决方案，支持带有文档的 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
});
小开

标记图像已不再适用于图标

在 Google Maps JavaScript API 3.10版之前，复杂的图标 定义为 MarkerImage 对象。添加了 Icon 对象文本 在3.10中，并替换 MarkerImage 从3.11版本开始 对象文字支持与 MarkerImage 相同的参数，允许 方法轻松地将标记图像转换为图标 构造函数，将以前的参数包装在{}中，并添加 每个参数的名称。

菲利普的准则是:

 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
});
小开
最佳答案

如果原始大小是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
});
小开

一个像我这样的初学者可能会发现，如果在你的控制范围内，使用在线编辑器或者像 Photoshop 这样的照片编辑器来实现 自己调整图像的大小，要比实现其中一个答案更难。

一个500x500的图像将出现在地图上比一个50x50的图像更大。

不需要编程。

小开

删除原点和锚点将更加规则的图片

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

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

我的答案是:
从一个 SVG 图像切换到一个 PNG 和下面的 Catherine Nyo有一个图像，是你将使用的两倍大小。

小开

如果你像我一样使用 vue2-google-map，设置大小的代码如下:

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

提交答案