1

pyt

2025-02-25 4f0c3cb2e324164f09f00acd2fb1f99f98c40a8f

1

 H5/pages.json

@@ -4,7 +4,7 @@
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app",
            "navigationBarTitleText": "首页",
            "navigationStyle": "custom"
        }
    },
@@ -101,7 +101,7 @@
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarTitleText": "三个身边",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },

 H5/pages/location/location.vue

@@ -1,221 +1,260 @@
<template>
    <view class="content">
        <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>
            <view slot="left" @click="back">
                <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
            </view>
        </u-navbar>
        <view class="" id="container">

        </view>
        <view class=" main">
            <view class="searchMain  mb-35 mt-38">
                <view class="search fs-27 ">
                    <text class="mr-35 ml-50">成都市</text>
                    <image class="w-17 h-8 mr-35" src="/static/location/toleft.png" mode=""></image>
                    <image class="w-31 h-31 mr-13" src="/static/location/search.png" mode=""></image>
                    <input class="flex1" v-model="keyword" placeholder="搜索小区/写字楼等"
                        placeholder-style="font-size:27rpx"></input>
                    <view class="sure" @click="searchLocation">
                        确定
                    </view>
                </view>

            </view>
            <view class="card" @click="changeAdr(item.id,item)" :class="item.id ==uid ?'activecard':''"
                v-for="item in locationList" :key="item.id">
                <text>{{item.address}}</text>
                <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">{{item.address}}</text>

            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                latitude: 39.909,
                longitude: 116.39742,
                map: null,
                uid: 0,
                keyword: '',
                locationList: [],
            };
        },
        methods: {

            back() {
                uni.navigateBack()
            },

            changeAdr(value, addr) {
                console.log(value, addr, 'asdasdada');
                this.uid = value
                const pages = getCurrentPages()
                let prevPage = pages[pages.length - 2];
                prevPage.location = addr.address
                prevPage.latitude = addr.point.lat
                prevPage.longitude = addr.point.lng
                setTimeout(() => {
                    uni.navigateBack()
                }, 200)
            },
            // 搜索地点
            searchLocation() {
                if (!this.keyword) return;
                uni.request({
                    url: `https://api.map.baidu.com/place/v2/search`,
                    method: 'GET',
                    data: {
                        query: this.keyword,
                        location: `${this.latitude},${this.longitude }`,
                        radius: 10000, // 搜索半径，单位：米
                        output: 'json',
                        ak: '3mHKIXMArjgIkgADzOlTYp4XssNSNkwr' // 替换为你自己的 AK
                    },
                    success: (res) => {
                        console.log(res, '-------');
                        if (res.data.status === 0) {
                            this.searchResults = res.data.results;
                            this.latitude = res.data.results[0].location.lat
                            this.longitude = res.data.results[0].location.lng
                            this.locationList = res.data.results.map((result, index) => {

                                result.id = index + 1

                                return result
                            });
                        }
                    },
                    fail: (err) => {
                        console.error('搜索失败:', err);
                    }
                });
            },
        },
        onLoad() {

        },
        onReady() {
            this.map = new BMapGL.Map("container"); // 创建地图实例 

            uni.getLocation({
                type: 'wgs84',
                success: (res) => {
                    console.log(res, 'res');
                    this.longitude = res.longitude;
                    this.latitude = res.latitude;
                    var point = new BMapGL.Point(res.longitude, res.latitude); // 创建点坐标
                    this.map.enableScrollWheelZoom(true);
                    this.map.centerAndZoom(point, 12);
                    var marker = new BMapGL.Marker(point);
                    this.map.addOverlay(marker);
                    var myGeo = new BMapGL.Geocoder();
                    // 根据坐标得到地址描述    
                    myGeo.getLocation(new BMapGL.Point(res.longitude, res.latitude), (result) => {
                        console.log(result, 'result');
                        this.locationList = result.surroundingPois.map((item, index) => {
                            item.id = index + 1
                            return item
                        })

                    })
                    this.map.addEventListener('click', (e) => {
                        var mercator = this.map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
                        this.latitude = e.latlng.lat
                        this.longitude = e.latlng.lng
                        var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
                        this.map.centerAndZoom(point, 12);
                        var myGeo = new BMapGL.Geocoder();
                        // 根据坐标得到地址描述    
                        myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), (result) => {
                            console.log(result, 'result');
                            this.locationList = result.surroundingPois.map((item, index) => {
                                item.id = index + 1
                                return item
                            })

                        })
                        var marker = new BMapGL.Marker(point);
                        this.map.addOverlay(marker);
                    });
                }
            });

        }
    }
</script>

<style lang="scss" scoped>
    #container {
        width: 100vw;
        height: 534rpx;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;

        .main {
            background-color: #fff;
            border-radius: 34rpx;
            position: absolute;
            top: 517rpx;
            z-index: 100;

            .activecard {
                background: #F2F2F2;
            }

        }

    }


    .searchMain {
        padding-left: 40rpx;
        padding-right: 40rpx;
        border-radius: 40rpx;

        .search {
            width: 669rpx;
            height: 77rpx;
            background: #FFFFFF;
            border-radius: 38rpx;
            border: 2rpx solid #DADADA;
            display: flex;

            align-items: center;
            justify-content: space-between;
        }
    }


    .sure {
        width: 104rpx;
        height: 69rpx;
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border-radius: 48rpx;
        font-weight: 500;
        font-size: 23rpx;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card {
        display: flex;
        flex-direction: column;
        font-weight: 800;
        font-size: 31rpx;
        color: rgba(0, 0, 0, 0.8);
        padding: 34rpx 38rpx 33rpx 38rpx;
        background: #fff;
        border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
    }
<template>

    <view class="content">

        <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>

            <view slot="left" @click="back">

                <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>

            </view>

        </u-navbar>

        <view class="" id="container">



        </view>

        <view class=" main">

            <view class="searchMain  mb-35 mt-38">

                <view class="search fs-27 ">

                    <text class="mr-35 ml-50">{{ city }}</text>

                    <image class="w-17 h-8 mr-35" src="/static/location/toleft.png" mode=""></image>

                    <image class="w-31 h-31 mr-13" src="/static/location/search.png" mode=""></image>

                    <input class="flex1" v-model="keyword" placeholder="搜索小区/写字楼等"

                        placeholder-style="font-size:27rpx"></input>

                    <view class="sure" @click="searchLocation">

                        确定

                    </view>

                </view>



            </view>

            <view class="card" @click="changeAdr(item.id,item)" :class="item.id ==uid ?'activecard':''"

                v-for="item in locationList" :key="item.id">

                <text>{{item.address}}</text>

                <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">{{item.address}}</text>



            </view>

        </view>



    </view>

</template>



<script>

    export default {

        data() {

            return {

                latitude: 39.909,

                longitude: 116.39742,

                map: null,

                uid: 0,

                keyword: '',

                locationList: [],

                city: '攀枝花市'

            };

        },

        methods: {



            back() {

                uni.navigateBack()

            },



            changeAdr(value, addr) {

                console.log(value, addr, 'asdasdada');

                this.uid = value

                const pages = getCurrentPages()

                let prevPage = pages[pages.length - 2];

                prevPage.location = addr.address

                prevPage.latitude = addr.point.lat

                prevPage.longitude = addr.point.lng

                setTimeout(() => {

                    uni.navigateBack()

                }, 200)

            },

            // 搜索地点

            searchLocation() {

                if (!this.keyword) return;

                uni.request({

                    url: `https://api.map.baidu.com/place/v2/search`,

                    method: 'GET',

                    data: {

                        query: this.keyword,

                        location: `${this.latitude},${this.longitude }`,

                        radius: 10000, // 搜索半径，单位：米

                        output: 'json',

                        ak: '3mHKIXMArjgIkgADzOlTYp4XssNSNkwr' // 替换为你自己的 AK

                    },

                    success: (res) => {

                        console.log(res, '-------');

                        if (res.data.status === 0) {

                            this.searchResults = res.data.results;

                            this.latitude = res.data.results[0].location.lat

                            this.longitude = res.data.results[0].location.lng

                            this.locationList = res.data.results.map((result, index) => {



                                result.id = index + 1



                                return result

                            });

                        }

                    },

                    fail: (err) => {

                        console.error('搜索失败:', err);

                    }

                });

            },

        },

        onLoad() {



        },

        onReady() {

            this.map = new BMapGL.Map("container"); // 创建地图实例 
            console.log(this.map);

            // uni.getLocation({

            //     type: 'wgs84',

            //     success: (res) => {

            navigator.geolocation.getCurrentPosition(success, error, options);



            function success(position) {

                const latitude = position.coords.latitude;

                const longitude = position.coords.longitude;

                const accuracy = position.coords.accuracy; // 精度，单位米



                console.log(`纬度: ${latitude}, 经度: ${longitude}, 精度: ${accuracy}`);

                //  在这里可以使用获取到的经纬度信息，例如在地图上显示位置等。

            }



            function error(err) {

                console.log(err);

                switch (err.code) {

                    case err.PERMISSION_DENIED:

                        console.error("用户拒绝了位置请求。");

                        break;

                    case err.POSITION_UNAVAILABLE:

                        console.error("无法获取位置信息。");

                        break;

                    case err.TIMEOUT:

                        console.error("位置请求超时。");

                        break;

                    default:

                        console.error("未知错误。");

                }

            }



            const options = {

                enableHighAccuracy: true, // 启用高精度定位

                timeout: 5000, // 5 秒超时

                maximumAge: 0 //  不使用缓存

            };

            let res = {

                longitude: 101.725544,

                latitude: 26.587259

            }

            this.longitude = res.longitude;

            this.latitude = res.latitude;

            var point = new BMapGL.Point(res.longitude, res.latitude); // 创建点坐标

            this.map.enableScrollWheelZoom(true);

            this.map.centerAndZoom(point, 12);

            var marker = new BMapGL.Marker(point);

            this.map.addOverlay(marker);

            var myGeo = new BMapGL.Geocoder();

            // 根据坐标得到地址描述    
            myGeo.getLocation(new BMapGL.Point(res.longitude, res.latitude), (result) => {

                this.locationList = result.surroundingPois.map((item, index) => {

                    item.id = index + 1

                    return item

                })



            })

            this.map.addEventListener('click', (e) => {

                var mercator = this.map.lnglatToMercator(e.latlng.lng, e.latlng.lat);

                this.latitude = e.latlng.lat

                this.longitude = e.latlng.lng

                var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);

                this.map.centerAndZoom(point, 12);

                var myGeo = new BMapGL.Geocoder();

                // 根据坐标得到地址描述    
                myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), (result) => {

                    console.log(result, 'result');

                    this.locationList = result.surroundingPois.map((item, index) => {

                        item.id = index + 1

                        return item

                    })



                })

                var marker = new BMapGL.Marker(point);

                this.map.addOverlay(marker);

            });

            // },

            // error:err=>{

            //     console.log(err,'err');

            // }

            // });



        }

    }

</script>



<style lang="scss" scoped>

    #container {

        width: 100vw;

        height: 534rpx;

    }



    .content {

        display: flex;

        flex-direction: column;

        align-items: center;



        .main {

            background-color: #fff;

            border-radius: 34rpx;

            position: absolute;

            top: 517rpx;

            z-index: 100;



            .activecard {

                background: #F2F2F2;

            }



        }



    }





    .searchMain {

        padding-left: 40rpx;

        padding-right: 40rpx;

        border-radius: 40rpx;



        .search {

            width: 669rpx;

            height: 77rpx;

            background: #FFFFFF;

            border-radius: 38rpx;

            border: 2rpx solid #DADADA;

            display: flex;



            align-items: center;

            justify-content: space-between;

        }

    }





    .sure {

        width: 104rpx;

        height: 69rpx;

        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);

        border-radius: 48rpx;

        font-weight: 500;

        font-size: 23rpx;

        color: #FFFFFF;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .card {

        display: flex;

        flex-direction: column;

        font-weight: 800;

        font-size: 31rpx;

        color: rgba(0, 0, 0, 0.8);

        padding: 34rpx 38rpx 33rpx 38rpx;

        background: #fff;

        border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);

    }

</style>