基于element-ui的Dialog对话框组件和腾讯地图选点组件封一个后台可用的经纬度选择组件

1.效果

        <location-picker :coord="coord" @change="onLocationPickerChange" />
        <el-button @click="coord = null">传null会关闭组件</el-button>
        <el-button @click="coord = ''">传空为当前定位</el-button>
        <el-button @click="coord = '22.984512,113.503624'">传指定经纬度</el-button>

2. 组件 LocationPicker.vue

需要lodash-es的get和cloneDeep方法 npm i lodash --registry=https://registry.npm.taobao.org

关于Iframe调用的地址, 我这里用的是自己改的,戳这里 https://blog.csdn.net/weixin_42405223/article/details/106302211

<template>
    <div class="location-picker">
        <el-dialog
            v-el-drag-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible="show"
            @open="open"
            @close="close"
        >
            <div slot="title"><i class="el-icon-place dialog-title-icon" />{{ title }}</div>
            <div :style="{ height: height + 'px' }">
                <iframe
                    id="mapPage"
                    width="100%"
                    height="100%"
                    frameborder="0"
                    :src="
                        `/locationPicker.html?search=${search}&type=${type}&policy=${policy}&zoom=${zoom}&key=${mapKey}&coord=${
                            coord ? coord : ''
                        }&coordtype=${coordType}&radius=${radius}&referer=${referer}`
                    "
                >
                </iframe>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="success">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getTXMapKey } from '@/api/map';
/** 窗口指令 */
import elDragDialog from '@/directive/el-drag-dialog';
/** lodash */
import { get, cloneDeep } from 'lodash-es';

export default {
    name: 'LocationPicker',
    directives: { elDragDialog },
    props: {
        height: {
            type: Number,
            default: 500
        },
        /** @see http://lbs.qq.com/webApi/component/componentGuide/componentPicker */
        referer: {
            type: String,
            default: 'myapp'
        },
        type: {
            type: Number,
            default: 1
        },
        search: {
            type: Number,
            default: 1
        },
        policy: {
            type: Number,
            default: 1
        },
        zoom: {
            type: Number,
            default: 15
        },
        coord: {
            type: String,
            default: null
        },
        coordType: {
            type: Number,
            default: 5
        },
        radius: {
            type: Number,
            default: 2000
        },
        /** 腾讯组件定义为key,是vue保留关键字,换名字 */
        mapKey: {
            type: String,
            default: getTXMapKey()
        }
    },
    data() {
        return {
            show: false,
            location: null,
            title: '请选择位置'
        };
    },
    watch: {
        coord(n) {
            if (n === '') {
                // 空字符串，视为未选点，显示弹窗
                this.show = true;
            } else {
                // null 视为关闭弹窗，非null视为有传入默认点
                this.show = !!n;
                if (!n) return;
                const latlng = this.coord.split(',');
                this.location = {
                    module: 'locationPicker',
                    latlng: {
                        lat: get(latlng, 0, '') || '',
                        lng: get(latlng, 1, '') || ''
                    }
                };
            }
        }
    },
    mounted() {
        window.removeEventListener('message', this.onPostMessage);
        window.addEventListener('message', this.onPostMessage);
    },
    methods: {
        onPostMessage(event) {
            var loc = event.data;
            if (loc && loc.module === 'locationPicker') {
                this.location = loc;
            }
        },
        open() {},
        success() {
            this.$emit('change', cloneDeep(this.location));
            this.show = false;
        },
        close() {
            this.show = false;
            this.location = null;
            this.$emit('update:coord', null);
        }
    }
};
</script>
<style lang="scss">
.location-picker {
    .el-dialog__body {
        padding: 0px;
        height: 500px;
    }
    .el-dialog__header {
        border-bottom: 1px solid #eee;
        color: #999;
        .dialog-title-icon {
            color: #ccc;
            margin-right: 10px;
        }
    }
}
</style>

3. 接口 api/map.js

放些地图相关公用配置而已

export function getTXMapKey() {
    return 'you key';
}

4. 继续对扒下来的腾讯地图组件做点小修改符合自己需求

修改扒下来的 index-6781e3253a.js (https://blog.csdn.net/weixin_42405223/article/details/106302211 2.1 中 c 点 )

搜索

t._geocoder(e)

按如下加上代码,目的是在地图有任务拖拽时候通过postMessage把相关经纬度给父窗口

window.parent.postMessage({module:'locationPicker',latlng:{lng:e.lng,lat:e.lat}}, "*");t._geocoder(e)

搜索

var s=new qq.maps.LatLng(window.locInfo.lat,window.locInfo.lng);

修改为以下,目的是在地图初始化完成后就把经纬度通过postMessage给父窗口

window.parent.postMessage({module:'locationPicker',latlng:{lng:window.locInfo.lng,lat:window.locInfo.lat}}, "*");var s=new qq.maps.LatLng(window.locInfo.lat,window.locInfo.lng);

5. 调用

<template>
    <div class="app-container station-list">
        <location-picker :coord.sync="coord" @change="onLocationPickerChange" />
        <el-button @click="coord = null">传null会关闭组件</el-button>
        <el-button @click="coord = ''">传空为当前定位</el-button>
        <el-button @click="coord = '22.984512,113.503624'">传指定经纬度</el-button>
    </div>
</template>
import LocationPicker from './components/LocationPicker';
export default {
    components: {
        LocationPicker
    },
    data() {
        return {
            coord: null
        };
    },
    methods: {
        onLocationPickerChange(location) {
            console.log(location);
        }
    }
};
</script>

搞定