更新记录

1.0.2（2025-11-17） 下载此版本

修改bug

1.0.1（2025-11-17） 下载此版本

更新文档说明

1.0.0（2025-11-17） 下载此版本

天地图的显示，经纬度转换地址，地址搜索等功能

平台兼容性

uni-app(4.86)

uni-app x(4.86)

xwp-tianditu

开发文档

UTS 语法 UTS API插件 UTS uni-app兼容模式组件 UTS 标准模式组件 Hello UTS

<xwp-tianditu ref="map" @loaded="mapLoaded" @mapClick="mapClick" mapKey="****" :zIndex="0" :latitude="latitude" :longitude="longitude" :markers="markers">

• latitude，longitude 经纬度
• zIndex web需要，控制ui在地图上层
• mapKey：天地图key
• markers：地图上的标记点
• scale：地图放缩,默认12
• minScale：地图最小放缩,默认3
• maxScale：地图最大放缩,默认20
• enableZoom：是否放缩，默认true
• enableScroll：是否拖动，默认true
• @loaded 监听地图是否加载完成
• @mapClick 监听地图的点击，返回参数{longitude,latitude}结构
• @markertap 监听标记点点击
• setMapCenter(latitude:null|number, longitude:null|number, zoom:number)设置中心点方法
• setZoom(zoom)设置放缩方法
• setDrag(drag)设置拖拽方法
• setMarkers(v:Array) 设置标记点方法
• geocoder(params,callback)坐标转换为地址方法,params:{longitude,latitude}结构,callback:(data:UTSJSONObject)=>void
• search(params,callback) 地址搜索方法，params:{keyWord}结果，callback:(data:UTSJSONObject)=>void

<template>
    <view class="example">
        <xwp-tianditu ref="map" @loaded="mapLoaded" @mapClick="mapClick" mapKey="****" :zIndex="0" :latitude="latitude" :longitude="longitude" :markers="markers"></xwp-tianditu>
        <view class="top">
            <text><text>地图点击位置：</text><text>{{mapClickAddress}}</text></text>
            <view style="display: flex;flex-direction: row;width: 100%;justify-content: space-between;margin-top: 10px;">
                <input style="flex: 1;" placeholder="输入搜索的地址" v-model="keyWord"/>
                <text @tap="onSearch">搜索</text>
            </view>
            <list-view style="max-height: 300px;" v-show="showSearchResult">
                <list-item v-for="item in searchList" @tap="(item)">
                    <text>{{ item['address']}}</text>
                </list-item>
            </list-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                longitude:118.799048,
                latitude:31.968005,
                markers:[] as UTSJSONObject[],
                tianduti:null as null|XwpTiandituComponentPublicInstance,
                mapClickAddress:'' as null|string,
                keyWord:'',
                searchList:[] as UTSJSONObject[],
                showSearchResult:false,
            };
        },
        created() {
            this.markers = [{longitude:this.longitude,latitude:this.latitude,tip:'南京南站'}]
        },
        methods:{
            mapLoaded(){
                this.tianduti = this.$refs['map'] as XwpTiandituComponentPublicInstance;
            },
            // 地图点击监听
            mapClick(data:UTSJSONObject){
                console.log('mapClick data',data)
                // 坐标转换地名
                this.tianduti?.geocoder(data,(res:UTSJSONObject)=>{
                    console.log('mapClick res',res)
                    if(res['success'] == true){
                        this.mapClickAddress = res.getString('data.formatted_address')
                        this.markers = [{longitude:data.longitude,latitude:data.latitude,tip:this.mapClickAddress}]
                    }else{
                        this.mapClickAddress = '坐标转换失败'
                    }
                })
            },
            onSearch(){
                // 地址搜素
                this.tianduti?.search({keyWord:this.keyWord},(res:UTSJSONObject)=>{
                    console.log('onSearch res',res)
                    if(res['success'] == true){
                        let data = res['data'] as UTSJSONObject;
                        if(data['type'] == 1){
                            this.showSearchResult = true;
                            this.searchList = data['data'] as UTSJSONObject[]
                        }
                    }else{
                        uni.showToast({
                            title:'搜索失败'
                        })
                    }
                })
            },
            (data:UTSJSONObject){
                this.showSearchResult = false;
                let arr = (data['lonlat'] as string).split(',')

                this.markers = [{longitude:parseFloat(arr[0]),latitude:parseFloat(arr[1]),tip:data['address']}]
                this.tianduti?.setMapCenter(parseFloat(arr[1]),parseFloat(arr[0]),12)
            }
        }
    }
</script>

<style lang="scss" scoped>
.example {
    flex: 1;
    position: relative;
    .top {
        position: absolute;
        top:0px;
        left:0px;
        width:100%;
        padding: 10px 10px;
        z-index: 1;
        background-color: white;
    }
}
</style>