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

Question

我目前的代码是

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")
    },

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

Answer 1

新解决方案

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

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

然后使用闭包从全局方法访问您的 vm。

const vm = this window.removePoint = function(id) { vm.removePoint(id) }

如果您有多个实例，则需要扩展此方法。

旧解决方案

这里有2个问题。

首先，修复有关引用的语法错误。

vm.markerid + ")\">Remove</a>"

更好的是，利用模板字符串来避免这种疯狂的引用。

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

其次，vue 模板中的任何函数始终在组件的范围内。假设一个this.物体放在前面。所以打电话removePoint真的是在打电话this.removePoint。

在实例内部定义函数。

vm.removePoint = function(id) { console.log(`removing point ${id}...`) }

或者确保您的组件选项removePoint在该methods部分中定义。

$window.removePoint(" + vm.markerId + ")"如果使用诸如https://www.npmjs.com/package/window-plugin 之类的插件，您还可以全局定义 removePoint（在 window 对象上）并从模板调用。

@click.native=\"$window.removePoint(" + vm.markerid ...

function removePoint(id) { console.log(`removing point ${id}...`) }