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

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

第一个参数是图片的url，第二个是图片大小，第三个是图片的原点，第四个是图片上marker应该指向的位置。 如果您的标记是一个圆圈，则将第四个参数设置为图像的中心。 并创建将markerImage 传递给图标属性的标记：

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