# tianditu-select-location-plugin

**Repository Path**: noliebe/tianditu-select-location-plugin

## Basic Information

- **Project Name**: tianditu-select-location-plugin
- **Description**: 天地图的地图选点的dialog内馅， 通过在dialog里嵌套iframe，在iframe里访问html来实现通过组件使用天地图获取经纬度。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: gitee
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-06
- **Last Updated**: 2026-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 天地图 - 地图选点

## /pc-map.html
电脑端 简易选点

## /mobile-map.html
手机端 带搜索的选点

## /pc-map-more-functions/index.html
电脑端 带搜索的选点


## 
所有的选点页 都可以通过 
iframe 嵌套后 通过 getMapLocation 获取中心点经纬度

> 1. 使用时注意不能跨域
> 2. 使用时 需提前注册天地图的应用key

```vue
<template>
    <div class="pagination">
        <el-dialog v-model="visible" width="80vw" title="地址选择" :before-close="handleClose" append-to-body>
                <!-- height="500px" -->
            <iframe
                id="nz-select-location-iframe"
                style="height:67vh"
                ref="elIframeRef"
                title="选择地址"
                width="100%"
                :src="`/getLocation-map-plugin/pc-map-more-functions/index.html?v=1&lat=${moduleData.lat}&lng=${moduleData.lng}`">
            </iframe>

            <!-- 底部弹窗页脚 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog()">
                        取消
                    </el-button>
                    <el-button
                        type="primary"
                        @click="handleConfirmEvent()"
                    >
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
interface Props {
    modelValue?: Record<string, any>
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: () => ({})
})

const emit = defineEmits<{
    (event: 'change'): void
    (event: 'update:modelValue', value: any): void
}>()

const visible = ref(false)

const defLat = 39.91143
const defLng = 116.39111
const moduleData = reactive({
    lat: defLat,
    lng: defLng,
})

const sizeChange = () => {
    emit('change')
}
const pageChange = () => {
    emit('change')
}

const closeDialog = ()=>{
    visible.value = false

    moduleData.lat = defLat
    moduleData.lng = defLng

}

const openDialog = (row)=>{
    if(row && row.lat && row.lng){
        // 有默认值
        moduleData.lat = row.lat
        moduleData.lng = row.lng
        visible.value = true
    }else{
        navigator.geolocation.getCurrentPosition(
            function(position) {
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                console.log("定位成功 lat:" + lat, 'lng:', lng);
                moduleData.lat = lat
                moduleData.lng = lng
                visible.value = true
            },
            function(error) {
                console.log(error, "定位失败：" , error.message);
                moduleData.lat = defLat
                moduleData.lng = defLng
                visible.value = true
            },
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            }
        );
    }

}

const elIframeRef = ref()
const handleConfirmEvent = ()=>{
    if(elIframeRef.value){
        const a = elIframeRef.value
        const ctx = a.contentWindow ? a.contentWindow : document.getElementById('nz-select-location-iframe').contentWindow;
        // res 经纬度数据
        let res;
        if( ctx.getMapLocation ){
            // 不跨域，直接调用
            res = ctx.getMapLocation()
            if(res.type === 'getlocalfn'){
                emit('change', res)
                closeDialog()
            }
        }else{
            const _window = window
            // 跨域，postMassage通信获取定位数据
            const handleWinMessage = function(event) {
                console.log('Message from iframe: ', event.data);
                const res = event.data
                if(res.type === 'getlocalfn'){
                    emit('change', res)
                    closeDialog()
                }
                _window.removeEventListener('message', handleWinMessage);
            }
            window.addEventListener('message', handleWinMessage );
            
            ctx.postMessage('getMapLocation', '*');
        }
        // const res = {"type":"getlocalfn","data":[{"type":"WGS-84（天地图）","lat":45.05837,"lng":118.3471},{"type":"GCJ-02（高德、腾讯）","lat":35.057910504577244,"lng":118.35283355758392},{"type":"BD-09（百度）","lat":35.063862599249234,"lng":118.35936456549643}]}
    }
}




defineExpose({
    openDialog,
    closeDialog
})
</script>

```



```js
// 调起dialog
this.$refs.tiandituLocationSelectRef.openDialog({lat: latlngArray[0], lng:latlngArray[1]})
````