Question

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

它正在工作，但是＃34;锚点＃34;该图标显示为默认位于图钉的左上角（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()，ESLint不知道google的来源。

您可以通过在文件顶部添加以下行来禁用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));

设置标记的锚点

2 个答案: