vue js에 있는 구글 맵의 infow에서 @click inside를 사용하여 함수를 트리거하는 방법은 무엇입니까?

vue js에 있는 구글 맵의 infow에서 @click inside를 사용하여 함수를 트리거하는 방법은 무엇입니까?

현재 코드는

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

그러나 위의 코드로는 동일한 트리거를 할 수 없습니다.remove 버튼을 클릭해도 아무 일도 일어나지 않는다.같은 문제에 대해서 어떤 점이 문제입니까?해결책을 찾을 수 있도록 도와주세요.

새로운 솔루션

글로벌 메서드를 호출하다InfoWindow일반 클릭 핸들러를 사용합니다.

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

그런 다음 닫기를 사용하여 글로벌 메서드에서 VM에 액세스합니다.

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

여러 인스턴스가 있는 경우 이 방법을 확장해야 합니다.

구 솔루션

여기에는 두 가지 문제가 있습니다.

먼저, 인용에 관한 구문 오류를 수정하십시오.

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}...`) }

@StevenSpungin 솔루션은 매우 효과적이었다.감사합니다.간단히 말해두죠

마커 콘텐츠를 만드는 동안

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

및 작성 시(임의의 컴포넌트)

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

마운트된 메서드에서 창 메서드를 vue 메서드에 매핑합니다.

mounted(){
    this.initMap();
    window.linkToKey = this.linkToKey;    // vue method wired to window method
},

html에 있는 정보 Window:

const contentString =`<img onClick="linkToKey('${video.key}')" src="images/${video.key}.png">`;
const infowindow = new google.maps.InfoWindow({
    content: contentString,
});

그런 다음 예상대로 vue 방식을 정의할 수 있습니다.

methods: {
    linkToKey(key) {
        console.log('key', key);            
        this.$router.push(`/video/${key}`);
    },

그러면 윈도우 메서드가 vue 메서드에 연결되고 InfoWindow에서 원하는 항목을 클릭하기만 하면 모든 작업을 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/53202059/how-to-trigger-a-function-using-click-inside-infowindow-of-google-maps-in-vue-j