ReactJS中未调用Google地图标记删除函数

Question

我正在ReactJS应用程序中尝试在谷歌地图上实现自定义标记。现在我有了标记，我想有一个删除它们的选项。这是用于放置和删除标记的代码。然而，当我点击信息窗口中的删除按钮时，似乎什么都没有发生。

addInfoWindow(marker, message, map) {
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, marker);
});
}
deleteMarker() {
console.log('Delete');
}
placeMarker = (map, location) => {
let marker = new google.maps.Marker({
position: location,
map: map,
icon: red_flag
});
var contentString =
'<button type="button" class="btn btn-danger" onClick="' +
this.deleteMarker +
'">Delete</button>';
this.addInfoWindow(marker, contentString, map);
};

我也尝试过；

deleteMarker = () => {
console.log('Delete');
}

当我点击按钮时，方法没有被调用，控制台上也没有错误。这个代码可能出了什么问题？为此内容字符串生成的HTML代码为；

<button type="button" class="btn btn-danger" onclick="function () {
console.log('Delete');
}">Delete</button>

为了进一步澄清，我希望删除按钮的字符串表现为这样；

<button type="button" class="btn btn-danger" onClick={() => this.deleteMarker("param")}>
Delete
</button>
deleteMarker = param => {
console.log("Delete", param);
};

Answer 1

您正试图使用代码，就好像它将在React中使用JSX执行一样，但谷歌地图和HTML并不能以这种方式工作。谷歌地图本身不使用React，因此，谷歌地图库在不了解React如何工作的情况下工作，React独立于谷歌地图如何工作。因此，每个React谷歌地图包都必须使用原始DOM或包装谷歌地图库，这样才能防止内存泄漏、错误或其他损坏。当您创建一个包含内容的InfoWindow对象时，该内容将创建独立于React的HTML，这意味着要使其按您希望的方式工作，您必须自己使用DOM侦听器。

您所写的内容在单击时会创建一个函数，但它不会执行。在HTML的onclick属性内部，它包含一个全局范围的JavaScript表达式。如果它只是一个函数表达式，就像你用这些选项中的任何一个得到的一样，它只会将函数创建为表达式，而不会执行它

相反，您将不得不使用全局函数来删除标记(无论如何都不可取(或手动添加事件侦听器(虽然很难，但可能是必要的(。

我建议为按钮创建一个唯一的ID，以便在添加后可以获得它。从那里，您必须在附加该按钮后获得对该按钮的引用，然后向其添加一个删除标记的事件侦听器。

使用您的示例，它可能看起来像这样：

addInfoWindow(marker, message, map, uniqueId) {
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, marker);
});
google.maps.event.addListener(infoWindow, 'domready', () => {
document.getElementById(uniqueId)
.addEventListener('click', this.deleteMarker.bind(this));
});
}
deleteMarker() {
console.log('Delete');
}
placeMarker = (map, location) => {
let marker = new google.maps.Marker({
position: location,
map: map,
icon: red_flag
});
var uniqueId = 'delete-marker-'+ getAUniqueId();
var contentString =
'<button type="button" class="btn btn-danger" id="' + uniqueId + '">Delete</button>';
this.addInfoWindow(marker, contentString, map, uniqueId);
};

这应该会让你继续前进。

但是，由于您处理的是原始DOM元素，因此应该确保在删除标记和信息窗口时能够清理该事件侦听器。这还需要在绑定deleteMarker函数时捕获您创建的函数(尽管如果您在组件构造函数中使用箭头函数或将方法绑定到实例，则不必额外捕获它(。

一些值得注意的参考文献：

• 谷歌地图活动文档-https://developers.google.com/maps/documentation/javascript/reference/event
• InfoWindow文档；domready事件-https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.domready
• MDN HTMLonclick属性(请注意，它是"过时的"，因为有更好的方法来注册事件处理程序，尽管对于特定的文章来说它也可能是"过时"的，也许有更新的(-https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Attribute/onclick
• W3学校onclick属性指南-https://www.w3schools.com/TAgs/att_onclick.asp