微信小程序地图定位

最新推荐文章于 2024-08-06 21:08:43 发布

啊呀阿荼

最新推荐文章于 2024-08-06 21:08:43 发布

阅读量187

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/qq_34724739/article/details/133350426

版权

文章描述了一个使用WXML和JavaScript编写的组件，用于显示两点之间的距离并实现点击后在地图上跳转。组件包含方法如`getLocationAndDistance`获取用户位置并计算与标记点的距离，`markerTap`事件触发地图App的导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现定位距离，点击跳转地图

做成组件方便调用

wxml

<view class="distance-navigator" style="{{distanceNavStyle}}"  bindtap="markerTap">
    <text class="distance">{{distance}}KM</text>
</view>

 properties: {
        marker: {
            type: Object
        },
        showNav: {
            type: Boolean,
            value: true
        },
        distanceNavStyle: {
            type: String,
            value: 'bottom: 0; right: 30rpx;'
        }
    },



   /**
     * 组件的方法列表
     */
    methods: {
        markerTap(e) {
          console.log( this.data.marker,'000');
          const latitude = Number(this.data.marker.latitude);
          const longitude = Number(this.data.marker.longitude);
            // 获取标记信息
            // const {latitude, longitude} = this.data.marker
        
            // 打开地图 App 进行导航
            wx.openLocation({
                latitude,
                longitude
            });
            console.log('---000');
        },
        getLocationAndDistance () {

            let that = this;
            const {latitude: targetLatitude, longitude: targetLongitude} = that.data.marker;
            try {
                wx.getFuzzyLocation({
                    type: 'wgs84', // 使用 GPS 坐标
                    success(res) {
                        // 这里可以将用户的位置坐标保存到数据中或进行其他操作
                        const userLatitude = res.latitude; // 用户当前纬度
                        const userLongitude = res.longitude; // 用户当前经度
                
                        that.getDistance(userLatitude, userLongitude, targetLatitude, targetLongitude);
                    },
                    fail(err) {
                        // 获取位置失败时的处理逻辑
                        console.error('获取位置失败', err);
                    }
                });
            } catch {
                // 获取不到经纬度时默认北京
                const userLatitude = 39.90965; //纬度
                const userLongitude = 116.40418; //经度

                that.getDistance(userLatitude, userLongitude, targetLatitude, targetLongitude);
            };
        },
        getDistance (lat1, lon1, lat2, lon2) {
            const R = 6371; // 地球的半径，单位千米
            const dLat = this.deg2rad(lat2 - lat1);
            const dLon = this.deg2rad(lon2 - lon1);
            
            const a =
                Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
                Math.sin(dLon / 2) * Math.sin(dLon / 2);
            
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const distance = R * c; // 距离（单位：千米）
            this.setData({
                distance: distance.toFixed(2)
            });
            return distance;
        },
        deg2rad (deg) {
            return deg * (Math.PI / 180);
        }
    }

在这里插入图片描述