如何触发VUE JS使用@单击内部的谷歌地图信息窗口的功能？(How to trigger a fu

我当前的代码是

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++;
    },

当我点击删除，我需要触发另一个函数删除点。

我把它定义为

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

但是我不能够使用上面的代码触发相同。 没有任何反应，当我点击按钮来删除。 什么是关于同一问题。 请帮我有一个解决方案？

Answer 1:

新的解决方案

调用来自全球方法InfoWindow使用纯老单击处理程序。

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

然后用封盖从全局法访问您的虚拟机。

const vm = this window.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部分。

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

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

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

Answer 2:

@StevenSpungin解决方案工作就像一个魅力。 谢谢..只是为了简单。

在创建标记的内容，

markerContent += `<button onclick='editVehicle(${vehicle.id});'>EDIT</button>`;

和上创建（任意成分）

 created() {
    let that = this;
    window.editAppointment = function(vehicleId) {
        console.log("vehicleId", vehicleId);
    }
}

文章来源: How to trigger a function using @click inside infowindow of google maps in vue js?