更新记录

1.0.1（2025-05-16） 下载此版本

更新apikey

1.0.0（2025-05-16） 下载此版本

组件初始化

平台兼容性

uni-app

其他

cc-gaodeCode

uniapp专属精品组件页面模板（由前端组件开发出品）

●组件模板规划：

由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。 合集地址： uni-app组件模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945)

●组件模板费用：

学习：免费下载，进行学习，无费用；

使用/商用：本页面地址赞赏8元后（当前项目产生赞赏订单可追溯），可终身商用；

●组件模板使用版权/商用：8元

本组件模板免费下载可供学习，如需商用，请在本组件页面模板进行赞赏8元，不赞赏可能面临侵权！保留追究知识产权法律责任！ （仅需8元获取组件模板代码-物超所值，1个组件页面市场价约20-100元）

我的技术公众号(私信可加前端技术交流群)

群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼

HTML代码实现部分

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>

        <!-- 地址转经纬度功能 -->
        <view class="address-converter">
            <view class="input-container">
                <input class="address-input" type="text" v-model="addressInput" placeholder="请输入地址"/>
                <button class="convert-button" @click="convertToCoordinates" :disabled="isConverting">
                    {{ isConverting ? '转换中...' : '转换' }}
                </button>
            </view>

            <!-- 历史记录 -->
            <scroll-view scroll-x="true" class="history-scroll" v-if="searchHistory.length > 0">
                <view class="history-container">
                    <view 
                        v-for="(item, index) in searchHistory" 
                        :key="index" 
                        class="history-item"
                        @click="useHistoryItem(item)"
                    >
                        <text class="history-text">{{ item.address }}</text>
                    </view>
                </view>
            </scroll-view>

            <view class="result-container" v-if="coordinates.longitude && coordinates.latitude">
                <view class="coordinate-box">
                    <text class="coordinate-label">经度:</text>
                    <text class="coordinate-value">{{ coordinates.longitude }}</text>
                </view>
                <view class="coordinate-box">
                    <text class="coordinate-label">纬度:</text>
                    <text class="coordinate-value">{{ coordinates.latitude }}</text>
                </view>
                <button class="copy-button" @click="copyCoordinates">复制坐标</button>

                <!-- 地图预览切换按钮 -->
                <button class="map-toggle-button" @click="toggleMapPreview">
                    {{ showMapPreview ? '隐藏地图' : '显示地图' }}
                </button>

                <!-- 地图预览 -->
                <view class="map-container" v-if="showMapPreview">
                    <map
                        class="map"
                        :latitude="Number(coordinates.latitude)"
                        :longitude="Number(coordinates.longitude)"
                        :markers="markers"
                        scale="14"
                    ></map>
                </view>
            </view>
        </view>

        <button class="nav-button" @click="goToAttendance">考勤打卡</button>
    </view>
</template>

<script>
    import config from '../../utils/config.js'

    export default {
        data() {
            return {
                title: '地址转经纬度',
                addressInput: '',
                coordinates: {
                    longitude: '',
                    latitude: ''
                },
                isConverting: false,
                searchHistory: [],
                showMapPreview: false,
                markers: []
            }
        },
        onLoad() {
            this.loadSearchHistory();
        },
        methods: {
            convertToCoordinates() {
                if (!this.addressInput) {
                    uni.showToast({
                        title: '请输入地址',
                        icon: 'none'
                    });
                    return;
                }

                this.isConverting = true;
                uni.showLoading({
                    title: '正在转换...'
                });

                // 使用高德地图API进行地理编码
                uni.request({
                    url: `https://restapi.amap.com/v3/geocode/geo`,
                    method: 'GET',
                    data: {
                        address: this.addressInput,
                        key: config.amapKey,
                        output: 'JSON'
                    },
                    success: (res) => {
                        uni.hideLoading();
                        this.isConverting = false;

                        if (res.data && res.data.status === '1' && res.data.geocodes && res.data.geocodes.length > 0) {
                            const location = res.data.geocodes[0].location.split(',');
                            this.coordinates.longitude = location[0];
                            this.coordinates.latitude = location[1];

                            // 设置地图标记
                            this.setMapMarker();

                            // 添加到历史记录
                            this.addToHistory({
                                address: this.addressInput,
                                longitude: location[0],
                                latitude: location[1]
                            });

                            uni.showToast({
                                title: '转换成功',
                                icon: 'success'
                            });
                        } else {
                            uni.showToast({
                                title: '地址转换失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: (err) => {
                        uni.hideLoading();
                        this.isConverting = false;
                        uni.showToast({
                            title: '请求失败',
                            icon: 'none'
                        });
                        console.error('API请求失败:', err);
                    }
                });
            },
            setMapMarker() {
                this.markers = [{
                    id: 1,
                    latitude: Number(this.coordinates.latitude),
                    longitude: Number(this.coordinates.longitude),
                    title: this.addressInput,
                    iconPath: '/static/location.png',
                    width: 30,
                    height: 30
                }];

                // 显示地图预览
                this.showMapPreview = true;
            },
            toggleMapPreview() {
                this.showMapPreview = !this.showMapPreview;
            },
            copyCoordinates() {
                const coordinates = this.coordinates.longitude + ',' + this.coordinates.latitude;
                uni.setClipboardData({
                    data: coordinates,
                    success: () => {
                        uni.showToast({
                            title: '坐标已复制到剪贴板',
                            icon: 'success'
                        });
                    }
                });
            },
            addToHistory(item) {
                // 检查是否已存在相同地址
                const index = this.searchHistory.findIndex(historyItem => historyItem.address === item.address);
                if (index !== -1) {
                    // 已存在，则删除旧记录
                    this.searchHistory.splice(index, 1);
                }

                // 添加到历史记录最前面
                this.searchHistory.unshift(item);

                // 限制最多保存10条历史记录
                if (this.searchHistory.length > 10) {
                    this.searchHistory.pop();
                }

                // 保存到本地存储
                this.saveSearchHistory();
            },
            saveSearchHistory() {
                try {
                    uni.setStorageSync('addressSearchHistory', JSON.stringify(this.searchHistory));
                } catch (e) {
                    console.error('保存历史记录失败', e);
                }
            },
            loadSearchHistory() {
                try {
                    const history = uni.getStorageSync('addressSearchHistory');
                    if (history) {
                        this.searchHistory = JSON.parse(history);
                    }
                } catch (e) {
                    console.error('加载历史记录失败', e);
                }
            },
            useHistoryItem(item) {
                this.addressInput = item.address;
                this.coordinates.longitude = item.longitude;
                this.coordinates.latitude = item.latitude;

                // 设置地图标记
                this.setMapMarker();
            },
            goToAttendance() {
                uni.navigateTo({
                    url: '/pages/attendance/attendance'
                });
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 100rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
        margin-bottom: 50rpx;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    .address-converter {
        width: 100%;
        background-color: #f8f8f8;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
    }

    .input-container {
        display: flex;
        flex-direction: row;
        margin-bottom: 15px;
    }

    .address-input {
        flex: 1;
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 0 10px;
        font-size: 16px;
    }

    .convert-button {
        margin-left: 10px;
        background-color: #1a4b7c;
        color: white;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        border-radius: 5px;
        font-size: 16px;
    }

    .history-scroll {
        width: 100%;
        white-space: nowrap;
        margin-bottom: 15px;
    }

    .history-container {
        display: inline-flex;
        padding: 5px 0;
    }

    .history-item {
        background-color: #e1e9f5;
        border-radius: 20px;
        padding: 5px 15px;
        margin-right: 10px;
        display: inline-block;
    }

    .history-text {
        color: #1a4b7c;
        font-size: 14px;
    }

    .result-container {
        margin-top: 20px;
        padding: 15px;
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #eee;
    }

    .coordinate-box {
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
    }

    .coordinate-label {
        width: 60px;
        font-weight: bold;
        color: #333;
    }

    .coordinate-value {
        flex: 1;
        color: #1a4b7c;
    }

    .copy-button {
        margin-top: 10px;
        background-color: #1a4b7c;
        color: white;
        height: 40px;
        line-height: 40px;
        width: 100%;
        border-radius: 5px;
        font-size: 16px;
    }

    .map-toggle-button {
        margin-top: 10px;
        background-color: #4c8dca;
        color: white;
        height: 40px;
        line-height: 40px;
        width: 100%;
        border-radius: 5px;
        font-size: 16px;
    }

    .map-container {
        margin-top: 15px;
        height: 300px;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

    .map {
        width: 100%;
        height: 100%;
    }

    .nav-button {
        background-color: #1a4b7c;
        color: white;
        padding: 20rpx 40rpx;
        border-radius: 10rpx;
        font-size: 32rpx;
        margin-top: 20rpx;
    }
</style>