Google Maps Api，自定义标记点的锚点

Question

我已经为我的Google地图创建了一个自定义标记。图标的锚点应该在左下角。但是在我的地图上，锚点出现在图标底部边缘的中心位置。该图标的大小是32 x 49。我已经包含了放置所有标记的代码。我已经搜索了数小时，却找不到任何答案。V3 API中指出，属性为"anchor"，但当我使用该属性时，地图上没有任何标记出现。

var iconImage = "images/Italian Flag Mine New.png";

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(45.067314, 7.697774),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var iconImage = {
    url: "images/Italian Flag Mine New.png",
    anchorPosition: (0, 49)
};

//var iconImage = {url: "images/Italian Flag Mine New.png",
//               anchor :  (0,49)};

var marker, i, savedMarker;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
        map: map,
        animation: google.maps.Animation.DROP,
        icon: iconImage
    });
}

- user3242810

Answer 1

anchor 属性是标记构造函数的一部分，但您仍然必须根据 Google 文档（在“复杂图标”标题下）创建对象实例。请尝试以下操作：

var iconImage = {
  url: "images/Italian Flag Mine New.png",
  anchor: new google.maps.Point(0,49)
};

您还应考虑指定size属性。

- pjfamig

Answer 2

您需要指定可点击锚点的坐标，这取决于您即将进行的缩放：

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

// Shapes define the clickable region of the icon.
  // The type defines an HTML <area> element 'poly' which
  // traces out a polygon as a series of X,Y points. The final
  // coordinate closes the poly by connecting to the first
  // coordinate.
    var shape = {
        coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 15, 49, 16, 49, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
        type: 'poly'
    };
    var iconImage=  new google.maps.MarkerImage(
                             // URL
                             "images/Italian Flag Mine New.png",//желательно название картинки поменять, чтобы было без пробелов
                             // (width,height)
                             new google.maps.Size(32, 49),
                             // The origin point (x,y)
                             new google.maps.Point(0, 0),
                             // The anchor point (x,y)
                             new google.maps.Point(9, 49)
                            );
 marker = new google.maps.Marker({
      position : new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
      map      : map,
      animation: google.maps.Animation.DROP,
      icon     : iconImage,
      shape: shape
     });

- Emir Mamashov