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

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对象

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已被弃用于Icon

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

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