y***@163.com
y***@163.com
  • 发布:2020-07-08 17:19
  • 更新:2023-10-23 14:14
  • 阅读:1994

【报Bug】app-nvu map include-points 无法显示所有标点

分类:uni-app

产品分类: 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>  
2020-07-08 17:19 负责人:无 分享
已邀请:
y***@163.com

y***@163.com (作者) - 小白一只

ip 地址可以用这个例子
[{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];

g***@yeah.net

g***@yeah.net

解决了吗?能分享一下吗?

  • y***@163.com (作者)

    没有,目前就把比例尺调到最小。

    2020-07-30 09:21

  • g***@yeah.net

    回复 y***@163.com: 我是自己计算的scale值你有兴趣可以参考一下,显示不是很精确,但是也算是解决了这个问题https://blog.csdn.net/qq_40792558/article/details/107694048

    2020-07-31 16:32

遗落之章

遗落之章

我的解决方式是自己算出最大和最小的经纬度,再往外扩展一部分,获得一个包裹了所有需要显示的点的矩形,讲矩形的对角两个顶点也加入include-points里,就能很好地显示所有我需要的点了

h***@hompe.com.cn

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);
}
})

9***@qq.com

9***@qq.com

nvue页面,同,组件使用includePoints属性没有缩放到点都展示,使用API includePoints提示Can not find map __ERROR

要回复问题请先登录注册