设置 Marker 的锚点

Question

我们正在尝试使用 react-google-maps 为我们的标记使用自定义图标。

它可以正常工作，但是图标的“锚点”似乎默认位于引脚 (0,0) 的左上角，这与我们的图标不兼容。

我可以看到直接使用google-maps-api有一个.Point:

anchor: new google.maps.Point(17, 34)

但我们看不到如何在 react-google-maps 组件中进行设置。

这是我们的代码：

const icon = {
  path: 'M32,0C20.8,0...',
  fillColor: '#444',
  fillOpacity: 1,
  strokeWeight: 0,
  scale: 0.75
};

....

<Marker position={marker.position} key={index} icon={icon} />

理想情况下，我们可以直接在 Icon 对象中设置某种锚键。

任何帮助将不胜感激。

Answer 1

其实你可以用new google.maps.Point()，就是不知道google从哪里来的ESLint。

您可以通过在文件顶部添加以下行来禁用 ESLint：

/*global google*/

（原文来源：https://github.com/tomchentw/react-google-maps/issues/434）

Answer 2

这个用法示例应该适合你。

var anchor = new google.maps.MarkerImage('/xxx/images/anchor.png',
                new google.maps.Size(34, 34),
                new google.maps.Point(0, 0),
                new google.maps.Point(17, 17));