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

javascript google-maps google-maps-markers image-resizing

2022-08-30 02:00:50

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

我想将大小调整为标准到较小的大小。最好的方法是什么？

法典：

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。

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

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