vue使用騰訊地圖擷取目前位置

騰訊地圖有一個元件：http://lbs.qq.com/tool/component-geolocation.html  

來到 調用方式二

<style lang="less">
</style>

<template>
    <div>
    <iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
            src="https://apis.map.qq.com/tools/geolocation?key=xxxx&referer=xxxx">
    </iframe>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loc: ''
            }
        },
        created() {
            this.Tmap()
        },
        methods: {
            Tmap() {
                window.addEventListener('message', function(event) {
                    if (event.data) {
                        this.loc = event.data // 接收位置資訊
                        if (this.loc) {
                            console.log(this.loc.lat)
                            console.log(this.loc.lng)
                        }
                    }
                }, false)

                // 設定6s逾時，防止定位元件長時間擷取位置資訊未響應
                setTimeout(function() {
                    if (!this.loc) {
                        console.log('定位逾時')
                    }
                }, 6000) // 6s為推薦值，業務調用方可根據自己的需求設定改時間，不建議太短
            }
        }
    }
</script>