
- 发布:2024-11-11 15:54
- 更新:2025-07-25 13:32
- 阅读:299
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 4.29
手机系统: 全部
手机厂商: 华为
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<map
id="map"
class="map-style"
style="{ height: '100%', width: '100%' }"
theme="'satellite'"
enable-satellite="true"
scale="scale"
latitude="latitude"
longitude="longitude"
markers="markers"
>
</map>
</template>
<script setup>
const props = defineProps({
scale: { type: Number, default: 16 },
latitude: {
type: Number,
default: 0,
},
longitude: {
type: Number,
default: 0,
},
markers: {
type: Array,
default: [],
},
})
</script>
</map>
</template>
<script setup>
const props = defineProps({
scale: { type: Number, default: 16 },
latitude: {
type: Number,
default: 0,
},
longitude: {
type: Number,
default: 0,
},
markers: {
type: Array,
default: [],
},
})
</script>
操作步骤:
点的数组:
[
{
"latitude": 25.123306,
"longitude": 102.741492,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123306,
"longitude": 102.741492,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123306,
"longitude": 102.741492,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123302,
"longitude": 102.74149,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123302,
"longitude": 102.74149,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123317,
"longitude": 102.741487,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123317,
"longitude": 102.741487,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123317,
"longitude": 102.741487,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123356,
"longitude": 102.741338,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123356,
"longitude": 102.741338,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123356,
"longitude": 102.741338,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123348,
"longitude": 102.741334,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
}
]
线的数组:
[
{
"points": [
{
"latitude": 25.123306,
"longitude": 102.741492
},
{
"latitude": 25.123306,
"longitude": 102.741492
},
{
"latitude": 25.123306,
"longitude": 102.741492
},
{
"latitude": 25.123302,
"longitude": 102.74149
},
{
"latitude": 25.123302,
"longitude": 102.74149
},
{
"latitude": 25.123317,
"longitude": 102.741487
},
{
"latitude": 25.123317,
"longitude": 102.741487
},
{
"latitude": 25.123317,
"longitude": 102.741487
},
{
"latitude": 25.123356,
"longitude": 102.741338
},
{
"latitude": 25.123356,
"longitude": 102.741338
},
{
"latitude": 25.123356,
"longitude": 102.741338
},
{
"latitude": 25.123348,
"longitude": 102.741334
}
],
"color": "#000",
"width": 10
}
]
点的数组:
[
{
"latitude": 25.123306,
"longitude": 102.741492,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123306,
"longitude": 102.741492,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123306,
"longitude": 102.741492,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123302,
"longitude": 102.74149,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123302,
"longitude": 102.74149,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123317,
"longitude": 102.741487,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123317,
"longitude": 102.741487,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123317,
"longitude": 102.741487,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123356,
"longitude": 102.741338,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123356,
"longitude": 102.741338,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123356,
"longitude": 102.741338,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
},
{
"latitude": 25.123348,
"longitude": 102.741334,
"iconPath": "/assets/point.06710a56.png",
"width": 5,
"height": 5
}
]
线的数组:
[
{
"points": [
{
"latitude": 25.123306,
"longitude": 102.741492
},
{
"latitude": 25.123306,
"longitude": 102.741492
},
{
"latitude": 25.123306,
"longitude": 102.741492
},
{
"latitude": 25.123302,
"longitude": 102.74149
},
{
"latitude": 25.123302,
"longitude": 102.74149
},
{
"latitude": 25.123317,
"longitude": 102.741487
},
{
"latitude": 25.123317,
"longitude": 102.741487
},
{
"latitude": 25.123317,
"longitude": 102.741487
},
{
"latitude": 25.123356,
"longitude": 102.741338
},
{
"latitude": 25.123356,
"longitude": 102.741338
},
{
"latitude": 25.123356,
"longitude": 102.741338
},
{
"latitude": 25.123348,
"longitude": 102.741334
}
],
"color": "#000",
"width": 10
}
]
预期结果:
点和线的端点在一起
点和线的端点在一起
实际结果:
隔得有距离。如上图所示
隔得有距离。如上图所示
bug描述:
uniapp引入高德地图后,用同样的点坐标和线坐标绘制,但是在地图上显示出来点和线位置不一样,如图:
