javascript - 如何在谷歌地图中对齐标记的图标

Question

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

想象一下我的标记图标是一个圆圈，我希望它的中心位于给定点的纬度...

代码：

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

其中第一个参数是图像 url，第二个是图像大小，第三个是图像的原点，第四个是图像上标记应该指向的位置。如果您的标记是一个圆圈，则将第四个参数设置为图像的中心。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

Answer 4

如果您使用 addMarker 并需要使用 Point(x, y) 设置 x,y 坐标

let markerInstance = mapInstance.addMarker({
            lat : _lat,
            lng : _lng,
            label: '8',
            icon : {
              url :  'url_image.png',
              origin:  new google.maps.Point(0, 0),
            }
        });