谷歌地图在点击事件时无法捕捉到坐标。

问题描述 投票:0回答:1

当我点击地图时,我无法捕捉到坐标,但当我做一个 console.log 它根据我点击的位置记录当前坐标。我的代码似乎有什么问题?我是不是漏掉了什么?我使用的是Nuxt.js框架。

看看吧。

export default {
    layout:'adminLte',
    data(){
        return{
            address:{
                lat:7.0650673,
                lng:125.5961476
            },
            clickedLat:'',
            clickedLng:'',
        }
    },
    methods:{
           initMap() {
            //center marker from circle
            var center = new google.maps.LatLng(this.address.lat, this.address.lng)
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: center
            })

            const marker = new google.maps.Marker({
                position: this.address,
                map: map,
                icon: {
                    url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
                }
            });

            //here is the event
            map.addListener('click', function(mapsMouseEvent) {
                console.log(mapsMouseEvent.latLng.lat().toString())
                console.log(mapsMouseEvent.latLng.lng().toString())

                this.clickedLat = mapsMouseEvent.latLng.lat().toString()
                this.clickedLng = mapsMouseEvent.latLng.lng().toString()

            });

        },

控制台可以用,但是... this 关键字似乎不可读, clickedLatclickedLng 在我的vue devtools中总是一个空字符串。我试着把它作为一个函数的参数,结果显示为 method xxx is not found/defined

javascript google-maps vue.js google-maps-api-3 nuxt.js
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.