StarSky

发布：2020-06-18 15:32
更新：2022-08-09 17:26
阅读：2671

【报Bug】v3模式nvue页面，map组件include-points属性在苹果ios手机中无法缩放，includePoints也无法缩放，安卓手机正常

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 2.7.9

手机系统： iOS

手机系统版本号： iOS 13.4

手机厂商：苹果

手机机型： iphoneXs Max

页面类型： nvue

打包方式：离线

项目创建方式： HBuilderX

示例代码：

<template>  
    <div>  
        <vun-nav-bar fixed="true" title="标题" :textStyle="textStyle" left-button="" slot="right">  
            <template v-slot:right>  
                <view class="right" style="margin-right: 10rpx;"><text class="ToCertify" @click="ToCertify">去认证</text></view>  
            </template>  
        </vun-nav-bar>  
        <map  
            id="map"  
            ref="map"  
            :style="{ width: windowWidth, height: windowHeight }"  
            :latitude="latitude"  
            :longitude="longitude"  
            :scale="scale"  
            @touchmove.stop=""  
            :markers="markers"  
            :circles="circles"  

            :show-location="true"  
        >  
            <cover-view class="location" @click.stop="">  
                <view class="mark">  
                    <text class="icon" :style="{ fontFamily: 'iconfont' }">{{ position_icon }}</text>  
                    <text class="position" @click="replace_position">{{ name }}</text>  
                </view>  
                <text class="goOrders" :style="{ fontFamily: 'iconfont' }" @click="showDialog">{{ goOrders_icon }}</text>  
            </cover-view>  
            <cover-view class="getLocation">  
                <text class="getLocation_icon" :style="{ fontFamily: 'iconfont' }" @click="getLocation">{{ getLocation_icon }}</text>  
            </cover-view>  
            <dialog height="166" v-model="dialogValue">  
                <view class="bottom_popup">  
                    <view class="popup-content" @click.stop="">  
                        <text class="popup-icon" :style="{ fontFamily: 'iconfont' }">{{ position_icon }}</text>  
                        <view class="range">  
                            <text class="text1">您的信息将在附近</text>  
                            <text class="distance">3KM</text>  
                            <text class="text2">范围内显示，是否开始接单？</text>  
                        </view>  
                    </view>  
                    <view class="select">  
                        <text class="btn1">开始</text>  
                        <text class="btn2">取消</text>  
                    </view>  
                </view>  
            </dialog>  
        </map>  
    </div>  
</template>  

<script>  
import VunNavBar from '@/components/vun-nav-bar';  
import dialog from '@/components/Simple-bottom-dialog/simple-bottom-dialog.nvue';  
export default {  
    data() {  
        return {  
            textStyle: {  
                fontSize: '34rpx',  
                color: '#333333',  
                fontWeight: 'normal'  
            },  
            latitude: 116.397128,  
            longitude: 39.916527,  
            name: '中国',  
            markers: [],  
            circles: [],  
            scale: 14,  
            windowWidth: 0,  
            windowHeight: 0,  
            position_icon: '\ue6a4',  
            goOrders_icon: '\ue613',  
            getLocation_icon: '\ue607',  
            points: [],  
            dialogValue: false  
        };  
    },  
    components: {  
        VunNavBar,  
        dialog  
    },  
    computed: {},  
    watch: {},  
    created() {  
        let domModule = weex.requireModule('dom');  
        domModule.addRule('fontFace', {  
            fontFamily: 'iconfont',  
            src: "url('../../static/iconfont/iconfont.ttf')"  
        });  
    },  
    async onReady() {  
        var that = this;  
        /* 获取设备窗口尺寸 */  
        uni.getSystemInfo({  
            success: res => {  
                that.windowHeight = res.windowHeight + 'px';  
                that.windowWidth = res.windowWidth + 'px';  
            }  
        });  
        const location = await new Promise((resolve, reject) => {  
            uni.getLocation({  
                type: 'gcj02',  
                success: res => {  
                    resolve(res);  
                }  
            });  
        });  
        that.longitude = location.longitude;  
        that.latitude = location.latitude;  
        that.getLocation();  
        that.commonJS();  
    },  
    onShow() {  
        var that = this;  
        uni.$on('chooseHandle', data => {  
            console.log(data);  
            that.longitude = data.chooseLocation.point.longitude;  
            that.latitude = data.chooseLocation.point.latitude;  
            that.name = data.chooseLocation.name + data.chooseLocation.address;  
            this.commonJS();  
        });  
    },  
    methods: {  
        //去认证  
        ToCertify() {  
            /* 去认证，上传证件 */  
            uni.navigateTo({  
                url: '/pages/uploads/uploads'  
            });  
        },  
        commonJS() {  
            var that = this;  
            var markersList = [  
                {  
                    id: 1000,  
                    latitude: that.latitude,  
                    longitude: that.longitude,  
                    height: 42,  
                    width: 42,  
                    iconPath: '../../static/images/index/location.png',  
                    anchor: {  
                        x: 0.5,  
                        y: 0.6  
                    },  
                    callout: {  
                        content: '去这里做账',  
                        color: '#282828',  
                        fontSize: 16,  
                        borderRadius: 20,  
                        bgColor: '#FFFFFF',  
                        textAlign: 'center',  
                        padding: 10,  
                        display: 'ALWAYS'  
                    }  
                }  
            ];  
            that.markers = markersList;  
            var circles = [  
                {  
                    latitude: that.latitude,  
                    longitude: that.longitude,  
                    fillColor: 'rgba(255,94,24,.2)',  
                    radius: 100,  
                    color: '#fdbcaa',  
                    strokeWidth: 1  
                }  
            ];  
            that.circles = circles;  
        },  
        /* 获取当前位置 */  
        getLocation() {  
            var that = this;  
            // switch (uni.getSystemInfoSync().platform) {  
            //  case 'ios':  
            //      that.scale = 18;  
            //      break;  
            // }  
            uni.getLocation({  
                type: 'gcj02',  
                geocode: true,  
                success: res => {  
                    that.longitude = res.longitude;  
                    that.latitude = res.latitude;  
                    that.name = res.address.poiName;  
                    var mapCtx = uni.createMapContext('map');  
                    mapCtx.moveToLocation({  
                        longitude: that.longitude,  
                        latitude: that.latitude,  
                        success: res => {  
                            that.scale = 18;  
                        }  
                    });  
                    mapCtx.includePoints({  
                        points: [  
                            {  
                                longitude: that.longitude,  
                                latitude: that.latitude  
                            }  
                        ]  
                    });  
                    that.commonJS();  
                }  
            });  
        },  
        replace_position() {  
            var that = this;  
            uni.navigateTo({  
                url: '/pages/chooseAddress/chooseAddress'  
            });  
        },  
        /* 底部弹窗 */  
        showDialog() {  
            this.dialogValue = !this.dialogValue;  
        }  
    }  
};  
</script>  

<style>  
.ToCertify {  
    width: 110rpx;  
    height: 52rpx;  
    line-height: 52rpx;  
    font-size: 24rpx;  
    background-color: #ff5d16;  
    border-radius: 26rpx;  
    color: #ffffff;  
    text-align: center;  
}  
.location {  
    flex-direction: row;  
    justify-content: space-between;  
    align-items: center;  
    width: 680rpx;  
    height: 120rpx;  
    position: absolute;  
    left: 50%;  
    margin-left: -33%;  
    bottom: 72rpx;  
    z-index: 9;  
    background-color: #ff5d16;  
    background-image: linear-gradient(-42deg, #fe6928, #ff5d16);  
    box-shadow: 0rpx 20rpx 32rpx 4rpx rgba(255, 93, 22, 0.41);  
    border-radius: 30rpx;  
    overflow: hidden;  
    color: #000;  
}  

.mark {  
    height: 62rpx;  
    line-height: 62rpx;  
    flex-direction: row;  
    justify-content: flex-start;  
    align-items: center;  
    flex: 1;  
    padding-left: 37rpx;  
}  

.icon {  
    width: 62rpx;  
    height: 62rpx;  
    border-radius: 50%;  
    background-color: #ffece4;  
    text-align: center;  
    line-height: 62rpx;  
    font-size: 40rpx;  
    color: #ff5d16;  
    margin-right: 35rpx;  
}  

.position {  
    width: 380rpx;  
    font-size: 30rpx;  
    line-height: 38rpx;  
    color: #ffffff;  
}  

.goOrders {  
    width: 42rpx;  
    height: 42rpx;  
    line-height: 42rpx;  
    text-align: center;  
    font-size: 32rpx;  
    margin-right: 37rpx;  
    color: #ffffff;  
}  

.getLocation {  
    width: 72rpx;  
    height: 72rpx;  
    background-color: #ffffff;  
    box-shadow: 0rpx 5rpx 7rpx 1rpx rgba(164, 164, 164, 0.44);  
    border-radius: 50%;  
    position: absolute;  
    right: 72rpx;  
    bottom: 243rpx;  
    z-index: 9;  
}  

.getLocation_icon {  
    color: #ff5d16;  
    font-size: 55rpx;  
    text-align: center;  
    line-height: 72rpx;  
}  

.bottom_popup {  
    padding: 47rpx 72rpx;  
}  

.popup-content {  
    flex-direction: row;  
}  

.popup-icon {  
    width: 62rpx;  
    height: 62rpx;  
    line-height: 62rpx;  
    color: #ff5d16;  
    font-size: 40rpx;  
    text-align: center;  
    border-radius: 50%;  
    background-color: #ffece4;  
    margin-right: 38rpx;  
}  

.distance {  
    font-size: 30rpx;  
    color: #ff5d16;  
}  

.range {  
    width: 550rpx;  
    margin-top: 13rpx;  
    flex-direction: row;  
    align-items: center;  
    flex-wrap: wrap;  
}  

.text1,  
.text2 {  
    font-size: 30rpx;  
    color: #666666;  
}  

.text2 {  
    margin-top: 20rpx;  
}  

.select {  
    flex-direction: row;  
    margin-top: 58rpx;  
}  

.btn1,  
.btn2 {  
    width: 154rpx;  
    height: 68rpx;  
    line-height: 68rpx;  
    text-align: center;  
    border-radius: 10rpx;  
    font-size: 26rpx;  
    color: #ff5d16;  
    border-width: 1rpx;  
    border-color: #ff5d16;  
    border-style: solid;  
}  

.btn2 {  
    color: #999999;  
    border-color: #999999;  
    margin-left: 31rpx;  
}  
</style>

操作步骤：

<template>  
    <div>  
        <vun-nav-bar fixed="true" title="标题" :textStyle="textStyle" left-button="" slot="right">  
            <template v-slot:right>  
                <view class="right" style="margin-right: 10rpx;"><text class="ToCertify" @click="ToCertify">去认证</text></view>  
            </template>  
        </vun-nav-bar>  
        <map  
            id="map"  
            ref="map"  
            :style="{ width: windowWidth, height: windowHeight }"  
            :latitude="latitude"  
            :longitude="longitude"  
            :scale="scale"  
            @touchmove.stop=""  
            :markers="markers"  
            :circles="circles"  
            :include-points="points"  
            :show-location="true"  
        >  
        <cover-view class="location" @click.stop="">  
            <view class="mark">  
                <text class="icon" :style="{ fontFamily: 'iconfont' }">{{ position_icon }}</text>  
                <text class="position" @click="replace_position">{{ name }}</text>  
            </view>  
            <text class="goOrders" :style="{ fontFamily: 'iconfont' }" @click="showDialog">{{ goOrders_icon }}</text>  
        </cover-view>  
        <cover-view class="getLocation">  
            <text class="getLocation_icon" :style="{ fontFamily: 'iconfont' }" @click="getLocation">{{ getLocation_icon }}</text>  
        </cover-view>  
        <dialog height="166" v-model="dialogValue">  
            <view class="bottom_popup">  
                <view class="popup-content" @click.stop="">  
                    <text class="popup-icon" :style="{ fontFamily: 'iconfont' }">{{ position_icon }}</text>  
                    <view class="range">  
                        <text class="text1">您的信息将在附近</text>  
                        <text class="distance">3KM</text>  
                        <text class="text2">范围内显示，是否开始接单？</text>  
                    </view>  
                </view>  
                <view class="select">  
                    <text class="btn1">开始</text>  
                    <text class="btn2">取消</text>  
                </view>  
            </view>  
        </dialog>  
        </map>  
    </div>  
</template>  

<script>  
import VunNavBar from '@/components/vun-nav-bar';  
import dialog from '@/components/Simple-bottom-dialog/simple-bottom-dialog.nvue';  
export default {  
    data() {  
        return {  
            textStyle: {  
                fontSize: '34rpx',  
                color: '#333333',  
                fontWeight: 'normal'  
            },  
            latitude: 116.397128,  
            longitude: 39.916527,  
            name: '中国',  
            markers: [],  
            circles: [],  
            scale: 14,  
            windowWidth: 0,  
            windowHeight: 0,  
            position_icon: '\ue6a4',  
            goOrders_icon: '\ue613',  
            getLocation_icon: '\ue607',  
            points: [  
                {  
                    longitude: '',  
                    latitude: ''  
                }  
            ],  
            dialogValue: false  
        };  
    },  
    components: {  
        VunNavBar,  
        dialog  
    },  
    computed: {},  
    watch: {},  
    created() {  
        let domModule = weex.requireModule('dom');  
        domModule.addRule('fontFace', {  
            fontFamily: 'iconfont',  
            src: "url('../../static/iconfont/iconfont.ttf')"  
        });  
    },  
    async onReady() {  
        var that = this;  
        /* 获取设备窗口尺寸 */  
        uni.getSystemInfo({  
            success: res => {  
                that.windowHeight = res.windowHeight + 'px';  
                that.windowWidth = res.windowWidth + 'px';  
            }  
        });  
        const location = await new Promise((resolve, reject) => {  
            uni.getLocation({  
                type: 'gcj02',  
                success: res => {  
                    resolve(res);  
                }  
            });  
        });  
        that.longitude = location.longitude;  
        that.latitude = location.latitude;  
        that.getLocation();  
        that.commonJS();  
    },  
    onShow() {  
        var that = this;  
        uni.$on('chooseHandle', data => {  
            console.log(data)  
            that.longitude = data.chooseLocation.point.longitude;  
            that.latitude = data.chooseLocation.point.latitude;  
            that.name = data.chooseLocation.name + data.chooseLocation.address;  
            this.commonJS();  
        });  
    },  
    methods: {  
        //去认证  
        ToCertify() {  
            /* 去认证，上传证件 */  
            uni.navigateTo({  
                url: '/pages/uploads/uploads'  
            });  
        },  
        commonJS() {  
            var that = this;  
            var markersList = [  
                {  
                    id: 1000,  
                    latitude: that.latitude,  
                    longitude: that.longitude,  
                    height: 42,  
                    width: 42,  
                    iconPath: '../../static/images/index/location.png',  
                    anchor: {  
                        x: 0.5,  
                        y: 0.6  
                    },  
                    callout: {  
                        content: '去这里做账',  
                        color: '#282828',  
                        fontSize: 16,  
                        borderRadius: 20,  
                        bgColor: '#FFFFFF',  
                        textAlign: 'center',  
                        padding: 10,  
                        display: 'ALWAYS'  
                    }  
                }  
            ];  
            that.markers = markersList;  
            var circles = [  
                {  
                    latitude: that.latitude,  
                    longitude: that.longitude,  
                    fillColor: 'rgba(255,94,24,.2)',  
                    radius: 100,  
                    color: '#fdbcaa',  
                    strokeWidth: 1  
                }  
            ];  
            that.circles = circles;  
        },  
        /* 获取当前位置 */  
        getLocation() {  
            var that = this;  
            switch(uni.getSystemInfoSync().platform){  
                case 'ios':  
                    that.scale = 18;  
                    break;  
            }  
            uni.getLocation({  
                type: 'gcj02',  
                geocode: true,  
                success: res => {  
                    that.longitude = res.longitude;  
                    that.latitude = res.latitude;  
                    that.name = res.address.poiName;  
                    var mapCtx = uni.createMapContext('map');  
                    mapCtx.moveToLocation({  
                        longitude: that.longitude,  
                        latitude: that.latitude,  
                        success: res => {  
                            that.scale = 20;  
                        }  
                    });  

                    that.points = [  
                        {  
                            longitude: that.longitude,  
                            latitude: that.latitude  
                        }  
                    ];  
                    that.commonJS();  
                }  
            });  
        },  
        replace_position() {  
            var that = this;  
            uni.navigateTo({  
                url: '/pages/chooseAddress/chooseAddress'  
            });  
        },  
        /* 底部弹窗 */  
        showDialog() {  
            this.dialogValue = !this.dialogValue;  
        }  
    }  
};  
</script>  

<style>  
.ToCertify {  
    width: 110rpx;  
    height: 52rpx;  
    line-height: 52rpx;  
    font-size: 24rpx;  
    background-color: #ff5d16;  
    border-radius: 26rpx;  
    color: #ffffff;  
    text-align: center;  
}  
.location {  
    flex-direction: row;  
    justify-content: space-between;  
    align-items: center;  
    width: 680rpx;  
    height: 120rpx;  
    position: absolute;  
    left: 50%;  
    margin-left: -33%;  
    bottom: 72rpx;  
    z-index: 9;  
    background-color: #ff5d16;  
    background-image: linear-gradient(-42deg, #fe6928, #ff5d16);  
    box-shadow: 0rpx 20rpx 32rpx 4rpx rgba(255, 93, 22, 0.41);  
    border-radius: 30rpx;  
    overflow: hidden;  
    color: #000;  
}  

.mark {  
    height: 62rpx;  
    line-height: 62rpx;  
    flex-direction: row;  
    justify-content: flex-start;  
    align-items: center;  
    flex: 1;  
    padding-left: 37rpx;  
}  

.icon {  
    width: 62rpx;  
    height: 62rpx;  
    border-radius: 50%;  
    background-color: #ffece4;  
    text-align: center;  
    line-height: 62rpx;  
    font-size: 40rpx;  
    color: #ff5d16;  
    margin-right: 35rpx;  
}  

.position {  
    width: 380rpx;  
    font-size: 30rpx;  
    line-height: 38rpx;  
    color: #ffffff;  
}  

.goOrders {  
    width: 42rpx;  
    height: 42rpx;  
    line-height: 42rpx;  
    text-align: center;  
    font-size: 32rpx;  
    margin-right: 37rpx;  
    color: #ffffff;  
}  

.getLocation {  
    width: 72rpx;  
    height: 72rpx;  
    background-color: #ffffff;  
    box-shadow: 0rpx 5rpx 7rpx 1rpx rgba(164, 164, 164, 0.44);  
    border-radius: 50%;  
    position: absolute;  
    right: 72rpx;  
    bottom: 243rpx;  
    z-index: 9;  
}  

.getLocation_icon {  
    color: #ff5d16;  
    font-size: 55rpx;  
    text-align: center;  
    line-height: 72rpx;  
}  

.bottom_popup {  
    padding: 47rpx 72rpx;  
}  

.popup-content {  
    flex-direction: row;  
}  

.popup-icon {  
    width: 62rpx;  
    height: 62rpx;  
    line-height: 62rpx;  
    color: #ff5d16;  
    font-size: 40rpx;  
    text-align: center;  
    border-radius: 50%;  
    background-color: #ffece4;  
    margin-right: 38rpx;  
}  

.distance {  
    font-size: 30rpx;  
    color: #ff5d16;  
}  

.range {  
    width: 550rpx;  
    margin-top: 13rpx;  
    flex-direction: row;  
    align-items: center;  
    flex-wrap: wrap;  
}  

.text1,  
.text2 {  
    font-size: 30rpx;  
    color: #666666;  
}  

.text2 {  
    margin-top: 20rpx;  
}  

.select {  
    flex-direction: row;  
    margin-top: 58rpx;  
}  

.btn1,  
.btn2 {  
    width: 154rpx;  
    height: 68rpx;  
    line-height: 68rpx;  
    text-align: center;  
    border-radius: 10rpx;  
    font-size: 26rpx;  
    color: #ff5d16;  
    border-width: 1rpx;  
    border-color: #ff5d16;  
    border-style: solid;  
}  

.btn2 {  
    color: #999999;  
    border-color: #999999;  
    margin-left: 31rpx;  
}  
</style>

预期结果：

在ios中能有点击缩放效果，安卓手机效果是正常的。

实际结果：

ios手机中触发includePoints方法无效

bug描述：

2020-06-18 15:32 负责人:DCloud_iOS_XHY 分享

3 个回复

DCloud_iOS_XHY

你好 iOS 端设置 includePoints 地图不会自动进行缩放，这个是高德地图的差异，你可以在调用 includePoints 后在设置 scale 改变缩放比例， moveToLocation 方法不执行回调确认为bug，会在下个版本修复

DCloud_iOS_XHY

moveToLocation 方法不执行回调确认为bug，已经在 2.8.0+ 版本修复

2020-07-08 20:15
1***@qq.com

回复 DCloud_iOS_XHY: moveToLocation：更新到最新的版本了【2.8.3.20200728】，他的完成，失败，或者是成功的任何回调都没有执行。

2020-08-10 16:46
lia_htbbt

你好，ios端我试了在includePoints后设置scale，刚开始前一秒没问题，后一秒又跑到别的国家了，该怎么解决？

2021-04-28 10:44
DCloud_iOS_XHY

回复 lia_htbbt: 你好，请单独发帖吧，提供一下示例工程

2021-04-28 19:02
大良造

iOS 端设置 includePoints 地图不会自动进行缩放，这个是高德地图的差异，你可以在调用 includePoints 后在设置 scale 改变缩放比例，这个比例也没计算公式，设置多少合适呢

2023-04-26 11:09

DCloud_uniAD_HDX

验证下下面的代码

<template>  
  <view>  
    <map id="test_map" ref="map1" style="width: 750rpx; height: 300px;" :show-location="true" :longitude="map.longitude"  
      :latitude="map.latitude">  
    </map>  
    <button @click="dingwei">定位到"北京西站"</button>  
    <button @click="dingwei2">ref 定位到"北京西站"</button>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        map: {  
          longitude: '', //经度  
          latitude: '', //纬度  
        }  
      }  
    },  
    onLoad() {  
      let _this = this;  
      uni.getLocation({  
        type: 'gcj02',  
        success: function(res) {  
          _this.map.longitude = res.longitude;  
          _this.map.latitude = res.latitude;  
        }  
      });  
    },  
    onReady() {  
      this.mapContext = uni.createMapContext('test_map', this);  
    },  
    methods: {  
      dingwei() {  
        //官方API uni.createMapContext(mapId,this)    
        //其中API对应方法之一: moveToLocation(OBJECT) //将地图中心移动到当前定位点，需要配合map组件的show-location使用    

        //需要实现的目标:定位平移 到指定坐标位置.比如案例中定位到"北京西站"    
        //实际结果: 在iPhone8中,定位平移 到本人真实的当前位置    

        this.mapContext.moveToLocation({  
          //该固定坐标为高德地图拾取,位置:北京西站    
          latitude: 39.894589,  
          longitude: 116.32125,  
          success: function(res) {  
            console.log("此处无回调!!!本条信息未在控制台打印");  
            console.log(res);  
          }  
        });  
      },  
      dingwei2() {  
        this.$refs.map1.moveToLocation({  
            //该固定坐标为高德地图拾取,位置:北京西站    
            latitude: 39.894589,  
            longitude: 116.32125  
          },  
          function(res) {  
            console.log("此处无回调!!!本条信息未在控制台打印");  
            console.log(res);  
          }  
        );  
      }  
    }  
  }  
</script>  

<style>  
</style>

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

要回复问题请先登录或注册

【报Bug】v3模式nvue页面，map组件include-points属性在苹果ios手机中无法缩放，includePoints也无法缩放，安卓手机正常

预期结果：

在ios中能有点击缩放效果，安卓手机效果是正常的。

实际结果：

ios手机中触发includePoints方法无效

bug描述：

3 个回复

公告

相关问题

【报Bug】v3模式nvue页面，map组件include-points属性在苹果ios手机中无法缩放，includePoints也无法缩放，安卓手机正常

预期结果： 在ios中能有点击缩放效果，安卓手机效果是正常的。

实际结果： ios手机中触发includePoints方法无效

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

预期结果：

在ios中能有点击缩放效果，安卓手机效果是正常的。

实际结果：

ios手机中触发includePoints方法无效