Javascript 在ReactJS中未调用Google maps marker delete函数

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

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

当我单击按钮时，该方法不会被调用，并且控制台上没有错误。此代码可能有什么问题？ 为该内容字符串生成的HTML代码为

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

删除

为了进一步澄清，我希望delete按钮的字符串的行为如下

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

deleteMarker = param => {
    console.log("Delete", param);
};

this.deleteMarker（“param”）}>
删除
deleteMarker=param=>{
控制台日志（“删除”，参数）；
};

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

您编写的内容将在单击时创建一个函数，但它不会执行。在HTML的

onclick

属性内部，它包含一个全局范围的JavaScript表达式。如果它只是一个函数表达式，就像您使用这些选项中的任何一个得到的一样，那么它只会将函数创建为一个表达式，而不会执行它

相反，您必须使用一个全局函数来删除标记（无论如何都不可取），或者手动添加一个事件侦听器（hacky，但可能是必要的）

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

使用您的示例，它可能如下所示：

AddInfo窗口（标记、消息、地图、唯一ID）{
var infoWindow=new google.maps.infoWindow({
内容：信息
});
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
});
google.maps.event.addListener（信息窗口，'domready'，（）=>{
document.getElementById（uniqueId）
.addEventListener（'click'，this.deleteMarker.bind（this））；
});
}
deleteMarker（）{
console.log（'Delete'）；
}
地点标记=（地图，位置）=>{
让marker=new google.maps.marker({
位置:位置,，
地图：地图，
图标：红旗
});
var uniqueId='delete marker-'+getAUniqueId（）；
var contentString=
“删除”；
此.addInfo窗口（标记、内容字符串、映射、唯一ID）；
};

这应该让你走了

但是，由于您正在处理原始DOM元素，因此应该确保在删除marker and info窗口时可以清理该事件侦听器。这将要求您在绑定

deleteMarker

函数时捕获您创建的函数（尽管如果您使用arrow函数或将方法绑定到组件构造函数中的实例，则无需额外捕获该函数）

一些值得注意的参考资料：

• 谷歌地图事件文档-
• 信息窗口文件<代码>domready事件-
• MDN HTML

  onclick

  attribute（注意，它是“过时的”，因为有更好的方法注册事件处理程序，尽管对于特定的文章它也可能是“过时的”，也许有一种更新的方法）——
• W3学校

  onclick

  属性指南-

---

您是否尝试过将

onClick

更改为只

单击

？Google Maps Api似乎劫持了一些正常的DOM事件。有人尝试过，但没有成功

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

deleteMarker = param => {
    console.log("Delete", param);
};