给定两个标记点的地址,格式化处理两个点的数据,添加颜色什么的其他的属性
 
                                        
                                    
                                    - 发布:2020-07-08 17:19
- 更新:2023-10-23 14:14
- 阅读:2487
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window 10
HBuilderX类型: 正式
HBuilderX版本号: 2.6.16
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: huawei meta 20
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
                                    
                                         
                                
                                                                                                预期结果:
                                    
                                    
                                        标记点都在视野范围内,不需要手动缩放
                                     
                                
                                                                                                标记点都在视野范围内,不需要手动缩放
实际结果:
                                    
                                    
                                        视野范围内没有这两个点,需要手动调整缩放尺寸才能显示
                                     
                                
                                                            视野范围内没有这两个点,需要手动调整缩放尺寸才能显示
bug描述:
<template>  
    <view class="content">  
      <view v-if="type === '1'">  
            <map   
                id="detailMap"  
                class="map-detail"  
                :latitude="old_latitude"  
                :longitude="old_longitude"  
                :scale="distance ? 15 : 9"  
                :circles="old_circles"  
                :include-points="includePoints"  
                :markers="old_covers">  
            </map>  
            <!--     :include-points="includePoints"  :scale="distance ? 15 : 9"-->  
       </view>  
    <view>{{pointInfo}}</view>  
    </view>  
</template>  
<script>  
    import config from '@/config/config.js';  
    import url from '@/config/url.js';  
    import { Base64 } from 'js-base64';  
    module.exports = {  
        components: {  
        },  
        onLoad() {  
            // point-type 0 获取定点,1 显示详细  
            this.type = uni.getStorageSync('point-type')  
            this.distance = uni.getStorageSync('type_valueName') === '正常'  
            console.log("this.distance", this.distance)  
            if(this.type === '0'){  
                this.getPoint()  
            } else if(this.type === '1'){  
                this.getDetail();  
            }  
        },  
        onUnload() {  
            uni.removeStorageSync('point-type')  
            uni.removeStorageSync('checkPoint_detail')  
        },  
        data() {  
            return {  
                latitude: 39.909,  
                longitude: 116.39742,  
                covers: [],  
                mapName: '', // 地址  
                type: '', // 地图类别  
                old_latitude: null, // 回显维度  
                old_longitude: null, // 回显经度  
                old_covers: [],  
                isShow: false,  
                circles: [],  
                old_circles: [],  
                pointInfo: '',  
                includePoints: [],  
                // 两点距离状态  
                distance: true,  
            };  
        },  
        methods: {  
            getDetail(){  
                let checkPoint_detail = uni.getStorageSync('checkPoint_detail');  
                if (checkPoint_detail.length == 1) {  
                    checkPoint_detail = checkPoint_detail[0]  
                    this.formatOnePoint(checkPoint_detail)  
                } else if (checkPoint_detail.length == 2){  
                    this.formatTwoPoint(checkPoint_detail)  
                }  
            },  
            formatOnePoint(detail_info){  
                this.old_covers = [{  
                        id:"001",  
                        width: 40,  
                        height: 40,  
                        iconPath: '../../static/map/check.png',  
                        latitude: detail_info.latitude,  
                        longitude: detail_info.longitude,  
                        title: '检查点'  
                    }  
                ]  
                this.old_latitude = detail_info.latitude;  
                this.old_longitude =  detail_info.longitude;  
                let old_circles = [{  
                    latitude:  detail_info.latitude,  
                    longitude: detail_info.longitude,  
                    color: '#EBB14C',  
                    fillColor: 'rgba(235, 177, 76, 0.11)',  
                    strokeWidth: 1,  
                    radius: 1000  
                }]  
                this.old_circles = [...old_circles]  
            },  
            formatInfo(info) {  
                let owncircles = [{  
                    latitude:  info.latitude,  
                    longitude: info.longitude,  
                    color: '#29CA85',  
                    fillColor: 'rgba(41, 202, 133, 0.11)',  
                    strokeWidth: 1,  
                    radius: 1000  
                }]  
                this.circles =  [...owncircles];  
                this.latitude = info.latitude;  
                this.longitude = info.longitude;  
                let ownLocation =  [  
                    {  
                        id:"001",  
                        width: 40,  
                        height:40,  
                        iconPath: '../../static/map/myLocation.png',  
                        latitude: info.latitude,  
                        longitude: info.longitude,  
                    }  
                ]  
                this.covers = [...ownLocation]  
                //  #ifdef APP-PLUS  
                console.log('ddddd');  
                const {city,district, street, streetNum, poiName} = info.address;  
                this.mapName = `${city} ${district} ${street} ${streetNum} ${poiName}`  
                console.log('当前位置的经度:' + info.longitude);  
                console.log('当前位置的纬度:' + info.latitude);  
                console.log('位置:' + poiName);  
                console.log(this.covers);  
                //  #endif  
            },  
            formatTwoPoint(twoPoint) {  
                this.old_covers = twoPoint;  
                this.includePoints = [{  
                       latitude: this.old_covers[0].latitude,  
                       longitude: this.old_covers[0].longitude,  
                    },  
                    {  
                       latitude: this.old_covers[1].latitude,  
                       longitude: this.old_covers[1].longitude,  
                    }  
                ];  
                console.log('this.include_points',this.includePoints)  
                // 以提交点位中心点  
                this.old_latitude = this.old_covers[0].latitude;  
                this.old_longitude = this.old_covers[0].longitude;  
                // 添加圆圈属性  
                let old_circles = [{  
                    latitude:  this.old_covers[0].latitude,  
                    longitude: this.old_covers[0].longitude,  
                    color: '#29CA85',  
                    fillColor: 'rgba(41, 202, 133, 0.11)',  
                    strokeWidth: 1,  
                    radius: 1000  
                },  
                {  
                    latitude:  this.old_covers[1].latitude,  
                    longitude: this.old_covers[1].longitude,  
                    color: '#EBB14C',  
                    fillColor: 'rgba(235, 177, 76, 0.11)',  
                    strokeWidth: 1,  
                    radius: 1000  
                }]  
                this.old_circles = [...old_circles]  
            }  
        }  
    }  
    </script>  
 
                                                                                                                                                                                                                                                             
                                                                                                                                                                                 
                                                                    
                                                                y***@163.com (作者) - 小白一只
ip 地址可以用这个例子
[{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];
 
                                                                    
                                                                解决了吗?能分享一下吗?
- 
                                                  
- 
                                                  回复 y***@163.com: 我是自己计算的scale值你有兴趣可以参考一下,显示不是很精确,但是也算是解决了这个问题https://blog.csdn.net/qq_40792558/article/details/107694048 2020-07-31 16:32 
 
                                                                    
                                                                h***@hompe.com.cn - yangguang
this.mapCtx.includePoints({
points: this.covers,
padding:[80,80,80,80],
success: (res) => {
util.print('includePoints', res);
},
fail: (err) => {
util.print('includePoints', err);
}
}) 
 
             
             
             
			 
                                                                     
                                                                    