uni-app H5地图组件画圆报错

uni-app H5地图组件画圆报错

示例代码：

<template>  
    <view class="content">  
        <view>  
            <map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :circles="circles">  
            </map>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            latitude: '',  
            longitude: '',  
            circles:[],  
            radius:'',  
        };  
    },  
    onLoad(options) {  
        this.latitude = options.lat;  
        this.longitude = options.lng;  
        this.radius = options.radius;  

    },  
    mounted() {  
        this.circles = [{  
            latitude:this.latitude,  
            longitude:this.longitude,  
            radius:this.radius  
        }]  

        console.log(this.circles)  
    }  
}  
</script>  

<style lang="less" scoped>  
.content{  
    width: 100%;  
    height: 100vh;  
    overflow: hidden;  
}  
</style>

操作步骤：

一直出现

预期结果：

解决报错，能画圆

实际结果：

提交bug

bug描述：

地图组件，画圆报错

bug图片

信息项 描述
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 64
HBuilderX类型 正式
HBuilderX版本 3.1.7
浏览器平台 Chrome
浏览器版本 89.0.4389.114（正式版本） （64 位）
项目创建方式 HBuilderX

更多关于uni-app H5地图组件画圆报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

其他端是否正常？

更多关于uni-app H5地图组件画圆报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


都不正常

回复 XLL: 小程序也不正常吗？

回复 DCloud_UNI_GSQ: 这个很容易复现的

回复 XLL: 全都不正常的话，大概率是你用法问题。你再检查检查。

回复 DCloud_UNI_GSQ: 代码就这么点，文档上copy的，怎么用错？确实是有问题，你们就不能去试一试吗？

在H5平台使用uni-app地图组件画圆时，常见的报错原因及解决方案如下：

  1. 数据类型问题：latitude、longitude和radius在circles数组中必须是数值类型。从options获取的参数默认是字符串，需要转换为数字：
this.latitude = Number(options.lat);
this.longitude = Number(options.lng);
this.radius = Number(options.radius);

  1. 坐标范围验证：确保经纬度在有效范围内（纬度-90~90，经度-180~180），半径需为正数。

  2. 地图容器尺寸：检查map组件是否成功渲染，确认父容器有有效高度。可尝试设置固定尺寸或使用onReady回调确保地图初始化完成。

  3. 初始化时机：将circles赋值逻辑移至onReady生命周期，避免地图未加载完成时设置覆盖物：

onReady() {
  this.circles = [{
    latitude: Number(this.latitude),
    longitude: Number(this.longitude),
    radius: Number(this.radius)
  }];
}
回到顶部