javascript - 如何在vue js中使用谷歌 map 的信息窗口内的@click触发功能？

我目前的代码是

addpolygon: function(e) {
      var vm = this;
      var point = {
        lat: parseFloat(e.latLng.lat()),
        lng: parseFloat(e.latLng.lng())
      };
      vm.coord.push(point);
      vm.replot();
      vm.marker = new google.maps.Marker({
        position: point,
        map: vm.map,
        icon: "/fred.png"
      });
      vm.infowindow = new google.maps.InfoWindow({
        content:"<a class=\"btn btn-danger\" @click.native=\"removePoint("+vm.markerid+)\">Remove</a>",
        maxWidth: 300
      });
      vm.bindInfoWindow(vm.marker, vm.map, vm.infowindow);
      vm.markers[vm.markerid] = {
        marker: vm.marker,
        point: point
      };
      vm.markerid++;
    },

当我点击 Remove 时，我需要触发另一个函数 remove Point。

我把它定义为

removePoint: function(id) {
      alert("adsf")
    },

但是我无法使用上面的代码触发相同的操作。当我点击按钮删除时没有任何 react 。同样有什么问题。请帮我有一个解决方案？

最佳答案

新解决方案

使用普通的点击处理程序从 InfoWindow 调用全局方法。

`onclick="removePoint(${vm.markerId})"`

然后使用闭包从全局方法访问您的 vm。
const vm = thiswindow.removePoint = function(id) { vm.removePoint(id)}
如果您有多个实例，则需要扩展此方法。

旧解决方案

这里有2个问题。

首先，修复有关引用的语法错误。
vm.markerid + ")\">Remove</a>"
更好的是，利用模板字符串来避免这种疯狂的引用。

vm.infowindow = new google.maps.InfoWindow({ content:`
<a class="btn btn-danger" @click.native="removePoint(${vm.markerid})">Remove</a>`, maxWidth: 300 });

其次，vue 模板中的任何函数始终在组件的范围内。假设前面放置了一个 this. 对象。所以调用 removePoint 就是调用 this.removePoint 。

在实例内定义函数。
vm.removePoint = function(id) { console.log(`removing point ${id}...`)}
或者确保您的组件选项在 removePoint 部分定义了 methods。

如果使用诸如 https://www.npmjs.com/package/window-plugin 之类的插件，您还可以全局定义 removePoint(在 window 对象上)并从模板中调用 $window.removePoint(" + vm.markerId + ")" 。
@click.native=\"$window.removePoint(" + vm.markerid ...function removePoint(id) { console.log(`removing point ${id}...`)}

关于javascript - 如何在vue js中使用谷歌 map 的信息窗口内的@click触发功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53202059/