如何在vue js中使用谷歌地图信息窗口内的@click触发功能?-前端问题

How to trigger a function using @click inside infowindow of google maps in vue js?(如何在vue js中使用谷歌地图信息窗口内的@click触发功能?)

本文介绍了如何在vue js中使用谷歌地图信息窗口内的@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.
When I click on Remove, I need to trigger another function remove Point.
我把它定义为
removePoint: function(id) {
      alert("adsf")
    },

但我无法使用上述代码触发相同的操作.当我单击按钮删除时没有任何反应.关于相同的问题是什么.请帮我解决一下?
But I am not able to trigger the same using the above code. Nothing happens when I click on the button remove. What is the problem regarding the same. Please help me to have a solution?
推荐答案
新解决方案
使用普通的单击处理程序从 InfoWindow 调用全局方法.

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

然后使用闭包从全局方法访问您的虚拟机.
Then use a closure to access your vm from the global method.
<代码>常量 vm = 这个window.removePoint = 函数(id){vm.removePoint(id)}
如果您有多个实例，则需要扩展此方法.
IF you have multiple instances, you will need to extend this approach.
这里有两个问题.
首先，修正引用的语法错误.
First, fix the syntax error concerning the quote.
vm.markerid + ")">删除</a>"
更好的是，利用模板字符串来避免这种疯狂的引用.
Even better, take advantage of template strings to avoid this kind of quote insanity.
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.
Second, any function inside a vue template is always within the scope of the component. Assume a this. object is placed in front.  So calling removePoint is really calling this.removePoint.
在实例中定义函数.
<代码>vm.removePoint = 函数(id){console.log(`删除点 ${id}...`)}
或者确保您的组件选项在 methods 部分中定义了 removePoint.
Or make sure your component options defines removePoint in the methods section.
如果使用 $window.removePoint(" + vm.markerId + ")"="https://www.npmjs.com/package/window-plugin" rel="noreferrer">https://www.npmjs.com/package/window-plugin.
You can also define removePoint globally (on the window object) and call $window.removePoint(" + vm.markerId + ")" from the template if using a plugin such as https://www.npmjs.com/package/window-plugin.
@click.native="$window.removePoint(" + vm.markerid ...

<代码>功能删除点(ID){console.log(`删除点 ${id}...`)}

这篇关于如何在vue js中使用谷歌地图信息窗口内的@click触发功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

推荐答案

新解决方案

基础教程推荐