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

Question

我正在尝试在我的 ReactJS 应用程序中的 google 地图上实现自定义标记。现在我得到了标记，我希望可以选择删除它们。这是放置和删除标记的代码。但是，当我点击信息 window 中的删除按钮时，似乎没有任何反应。

  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 执行一样，但是 Google 地图和 HTML 不能那样工作。 Google Maps 本身不使用 React，因此，Google Maps 库在不知道 React 如何工作的情况下工作，并且 React 独立于 Google Maps 如何工作。因此，每个 React Google Maps 包都必须使用原始 DOM 或包装 Google Maps 库，以防止内存泄漏、错误或其他损坏。当您创建一个包含内容的 InfoWindow 对象时，该内容将创建 HTML 独立于 React，这意味着要使其按照您希望的方式工作，您必须自己使用 DOM 个侦听器。

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

相反，您将不得不使用全局函数删除标记（无论如何都不建议）或手动添加事件侦听器（hacky，但可能是必要的）。

我建议为该按钮创建一个唯一的 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 元素，因此您应该确保在删除标记和信息 window 时可以清理该事件侦听器。这将需要您还捕获绑定 deleteMarker 函数时创建的函数（尽管如果您使用箭头函数或将方法绑定到组件构造函数中的实例，则不必额外捕获它）。

一些著名的参考资料：

Google 地图事件文档 - https://developers.google.com/maps/documentation/javascript/reference/event
信息窗口文档； domready 事件 - https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.domready
MDN HTML onclick 属性（注意它是 "obsolete" 因为有更好的方法来注册事件处理程序，尽管对于那篇特定文章它也可能是 "obsolete" , 也许有更新的) - https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Attribute/onclick
W3 学校 onclick 属性指南 - https://www.w3schools.com/TAgs/att_onclick.asp

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

Google maps marker delete function not invoked in ReactJS

javascript

reactjs

maps

marker