vue 获取电脑位置（省市）

SolitaryOrchid 2021-09-06 原文

为什么只能获取到省市呢？因为通过腾讯地图api就只能获取到这里！

为什么用腾讯地图呢？不是还有高德！

高德可以获取到省市区，但是我弄不出来，报各种错误，我也没办法，只能用腾讯地图api了，对了，扯一句，QQ邮件服务器真的垃圾

好了，该开始了

<template>
    <div>
        <h1>我是测试页面2</h1>
        <iframe id="geoPage"
                width=0
                height=0
                frameborder=0
                style=""
                scrolling="no"
                src="https://apis.map.qq.com/tools/geolocation?key=J4OBZ-EONKG-CMOQB-I5KJR-ET2MS-T7F5W&referer=myapp"
        >

        </iframe>
    </div>
</template>

<script>
    export default {
        name: "TestVue2",
        data(){
            return{
            }
        },
        methods:{
            Tmap() {
                window.addEventListener(\'message\', function(event) {
                    if(event.data != null){//这个会获取到四条数据，其中有一条数据为null，然后你如果是用变量去获取，会报错
                        if(event.data.module == \'geolocation\'){//去掉一条null后还有一条杂数据，里面没啥东西，然后你要是用变量获取位置还是会报错，所有过滤掉非该类型的数据
                            console.log(event.data);// 显示你当前位置，里面有国家、省份、市、经纬度、邮政编码
                        }
                    }
                }, false);

            },
        },
        mounted:function () {
            this.Tmap();
        }
    }
</script>

<style scoped>

</style>

好了，结束了，不得不说，腾讯地图api真™简单，不像高德，我能又是依赖又是js结果这有错那有错。
这就是控制台输出的结果：

哦，对了，再插一句，

<iframe id="geoPage"
                width=0
                height=0
                frameborder=0
                style=""
                scrolling="no"
                src="https://apis.map.qq.com/tools/geolocation?key=J4OBZ-EONKG-CMOQB-I5KJR-ET2MS-T7F5W&referer=myapp"
        >
里面的key是我申请的密钥，你们不想申请也可以用，虽然我不知道会不会出错
如果你们要申请的话也是蛮简单的，
进入https://lbs.qq.com/   ，登录（注册），
依次点击头像，开发者信息，应用管理，我的应用，创建应用，添加key，选择webServiceAPI，然后就有了