src/common/components/location.vue

<template>
    <van-popup v-model="map_show" position="bottom">
        <w-icon class="map-icon" type="clear" size="40" @click="closeMap"></w-icon>
        <iframe id="mapPage" width="100%" :height="height" frameborder=0
                :src="frame_src">
        </iframe>
        <div style="width:200px;height:174px;position: fixed;right:0;bottom: 0;background-color: transparent;"
             @click="toMap" v-if="isSupport">
        </div>
    </van-popup>
</template>
<script>
    import siteinfo from "../../siteinfo";
    import axios from "../axios";
    import wx from "../wx";

    export default {
        computed: {
            map_show: {
                get: function () {
                    return this.$store.state.choose_location.show;
                },
                set: function (v) {
                    this.$store.state.choose_location.show = v;
                }
            },
            option() {
                return this.$store.state.choose_location.obj;
            }
        },
        watch: {
            map_show: {
                immediate: true,
                deep: true,
                handler: function (newVal, oldVal, changedPath) {
                    if (newVal) {
                        console.log("newVal", newVal);
                        this.open();
                    }
                },
            }

        },
        data: function () {
            return {
                frame_src: '',
                key: '',
                height: 500,
                flag: false,
                isSupport:false,
            }
        },
        created: function () {
            this.height = document.documentElement.clientHeight;

        },
        methods: {
            toMap(){

                var lat =this.option.latitude;
                var lng = this.option.longitude;
                var sname = "我的位置";
                var url = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key=" + this.key;
                wx.request({
                    url: url,
                    success: function (res) {
                        var data = res.data;
                        var address = data.result.address_component.district + data.result.address_component.street;
                        //callback(address);
                        //wx.alert(res);
                        var url = "androidamap://route/plan?sourceApplication=softname&sname=" + sname + "&dlat=" + lat + "&dlon=" + lng + "&dname=" + address + "&dev=0&t=0";
                        window.location.href = url;
                        setTimeout(function(){
                            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
                            if(typeof hidden =="undefined" || hidden ==false){

                                window.location.href ="https://mobile.amap.com";
                            }
                        }, 3500);
                    }
                })

            },
            closeMap() {
                this.$store.state.choose_location.show = false;
            },
            open() {
                var default_key = 'LWHBZ-KZGC5-PPNI6-QEEK5-7SPHQ-C6BUW';
                var key = wx.getStorageSync("w_wechat_setting");
                if (key && key.map_key) key = key.map_key;
                if (key) {
                    this.key = key;
                    this.openIfarm();
                } else {
                    this.key = default_key;
                    axios.async_get(siteinfo.wechat_set.api.getWechatSet, {}).then(res => {
                        wx.setStorageSync("w_wechat_setting", res);
                        this.key = res.map_key;
                        this.openIfarm();
                    }).catch(res => {
                        this.openIfarm();
                    });

                }
            },
            openIfarm() {
                if (this.option.type === 'open') {
                    this.isSupport = true;
                    this.frame_src = `https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:${this.option.latitude},${this.option.longitude}&key=${this.key}&referer=myapp`;
                } else {
                    this.isSupport = false;
                    if (this.option.latitude != undefined && this.option.latitude != 0) {
                        this.frame_src = "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=" + this.key + "&referer=myapp&coord="
                            + this.option.latitude + "," + this.option.longitude;
                    }
                    else {
                        this.frame_src = "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=" + this.key + "&referer=myapp";
                    }
                }
                console.log("this.frame_src", this.frame_src);
                this.map_show = true;
                var that = this;
                if (!this.flag) {
                    window.addEventListener('message', function (event) {
                        that.msgListener(event);
                    }, false);
                }
            },
            msgListener(event) {
                this.flag = true;
                var that = this;
                // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
                var loc = event.data;
                if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                    // console.log('location', loc);
                    //document.getElementById("mapPage").style.display = "none";
                    var res = {
                        name: loc.poiname,
                        address: loc.poiaddress,
                        latitude: loc.latlng.lat,
                        longitude: loc.latlng.lng,
                    };
                    that.map_show = false;
                    that.$emit('confirm', res);
                }
            }
        }
    }
</script>
<style scoped>
    .map-icon {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 100;
    }
</style>