如何在Google地图中对齐标记的图标

Question

在谷歌地图中,​​标记图像的中心底部通常是它必须标记的点的纬度.

想象一下,我的标记图标是一个圆圈,我希望它的中心位于给定点的lat-lng ...

码:

var image_hotspot = 'img/icons/bank_euro.png';
var marker = new google.maps.Marker({
      map: map,
      position: placeLoc,
      icon: image_hotspot
    });

Answer 1

您需要的是创建一个MarkerImage对象,例如:

var markerImage = new google.maps.MarkerImage('img/icons/bank_euro.png',
                new google.maps.Size(30, 30),
                new google.maps.Point(0, 0),
                new google.maps.Point(15, 15));

第一个参数是图像网址,第二个是图像大小,第三个是图像的原点,第四个是标记应该指向的图像上的位置.如果您的标记是圆形,则将第四个参数设置为图像的中心.并创建传递markerImage给icon属性的标记:

var marker = new google.maps.Marker({
  map: map,
  position: placeLoc,
  icon: markerImage
});

Answer 2

来自文档:

将MarkerImage对象转换为Icon类型

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

变

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

https://developers.google.com/maps/documentation/javascript/markers

Answer 3

使用谷歌地图的v3,您可以/应该使用:

new maps.Marker({
            ...
            icon: {
                url: '.../myimage.png',
                scaledSize: new maps.Size(60, 30),
                anchor: new maps.Point(30, 30),
            },
        });

https://developers.google.com/maps/documentation/javascript/reference#Icon