- 发布:2021-08-05 11:49
- 更新:2023-04-17 15:39
- 阅读:571
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版 19042.1052
HBuilderX类型: 正式
HBuilderX版本号: 3.1.22
手机系统: 全部
手机厂商: 华为
页面类型: nvue
打包方式: 离线
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view>
<map id="map" ref="map" :style="{width:'750rpx',height:500 +'px',}" :latitude="latitude" :longitude="longitude"
:scale="18" :polygons="polygons">
<!-- 变量替换绑定 polygon 可以显示 -->
<!-- 变量替换绑定 polygon 可以显示 -->
<!-- 变量替换绑定 polygon 可以显示 -->
</map>
</view>
</template>
<script>
import {
geofenceList
} from '../../api/address.js'
export default {
data() {
return {
latitude: 25.12905,
longitude: 117.031141,
polygons:[],
polygon: [{
"points": [{
"latitude": 25.12905,
"longitude": 117.031141
}, {
"latitude": 25.128205,
"longitude": 117.0326
}, {
"latitude": 25.126825,
"longitude": 117.031945
}, {
"latitude": 25.125436,
"longitude": 117.030958
}, {
"latitude": 25.1243,
"longitude": 117.029993
}, {
"latitude": 25.122794,
"longitude": 117.029553
}, {
"latitude": 25.121667,
"longitude": 117.030122
}, {
"latitude": 25.119763,
"longitude": 117.03098
}, {
"latitude": 25.118015,
"longitude": 117.031173
}, {
"latitude": 25.115771,
"longitude": 117.030476
}, {
"latitude": 25.114265,
"longitude": 117.029961
}, {
"latitude": 25.112594,
"longitude": 117.029607
}, {
"latitude": 25.112342,
"longitude": 117.028684
}, {
"latitude": 25.112079,
"longitude": 117.027203
}, {
"latitude": 25.111953,
"longitude": 117.026345
}, {
"latitude": 25.111613,
"longitude": 117.025755
}, {
"latitude": 25.111371,
"longitude": 117.024661
}, {
"latitude": 25.111283,
"longitude": 117.024028
}, {
"latitude": 25.111225,
"longitude": 117.022236
}, {
"latitude": 25.111186,
"longitude": 117.021624
}, {
"latitude": 25.111225,
"longitude": 117.020798
}, {
"latitude": 25.111186,
"longitude": 117.019747
}, {
"latitude": 25.111186,
"longitude": 117.018985
}, {
"latitude": 25.111244,
"longitude": 117.018277
}, {
"latitude": 25.111205,
"longitude": 117.017665
}, {
"latitude": 25.111244,
"longitude": 117.016206
}, {
"latitude": 25.111215,
"longitude": 117.01567
}, {
"latitude": 25.111302,
"longitude": 117.014522
}, {
"latitude": 25.111322,
"longitude": 117.013996
}, {
"latitude": 25.111215,
"longitude": 117.01332
}, {
"latitude": 25.111293,
"longitude": 117.012569
}, {
"latitude": 25.111322,
"longitude": 117.011786
}, {
"latitude": 25.111273,
"longitude": 117.010552
}, {
"latitude": 25.111254,
"longitude": 117.009855
}, {
"latitude": 25.11105,
"longitude": 117.009394
}, {
"latitude": 25.111128,
"longitude": 117.008599
}, {
"latitude": 25.111254,
"longitude": 117.00698
}, {
"latitude": 25.111254,
"longitude": 117.00625
}, {
"latitude": 25.111205,
"longitude": 117.005542
}, {
"latitude": 25.111127,
"longitude": 117.004576
}, {
"latitude": 25.11103,
"longitude": 117.00405
}, {
"latitude": 25.111409,
"longitude": 117.003761
}, {
"latitude": 25.112526,
"longitude": 117.003289
}, {
"latitude": 25.112653,
"longitude": 117.001926
}, {
"latitude": 25.112691,
"longitude": 117.000145
}, {
"latitude": 25.115134,
"longitude": 116.999195
}, {
"latitude": 25.116427,
"longitude": 116.997645
}, {
"latitude": 25.117753,
"longitude": 116.997205
}, {
"latitude": 25.119152,
"longitude": 116.997538
}, {
"latitude": 25.120351,
"longitude": 116.997286
}, {
"latitude": 25.120963,
"longitude": 116.996878
}, {
"latitude": 25.121595,
"longitude": 116.996524
}, {
"latitude": 25.12312,
"longitude": 116.996674
}, {
"latitude": 25.124868,
"longitude": 116.996868
}, {
"latitude": 25.127238,
"longitude": 116.997876
}, {
"latitude": 25.128307,
"longitude": 116.997747
}, {
"latitude": 25.129706,
"longitude": 116.997769
}, {
"latitude": 25.131687,
"longitude": 116.997876
}, {
"latitude": 25.133571,
"longitude": 116.998412
}, {
"latitude": 25.135378,
"longitude": 117.000172
}, {
"latitude": 25.137748,
"longitude": 117.001052
}, {
"latitude": 25.139613,
"longitude": 117.001138
}, {
"latitude": 25.141283,
"longitude": 117.001331
}, {
"latitude": 25.141808,
"longitude": 117.001803
}, {
"latitude": 25.141847,
"longitude": 117.003777
}, {
"latitude": 25.141594,
"longitude": 117.008562
}, {
"latitude": 25.142089,
"longitude": 117.010966
}, {
"latitude": 25.126743,
"longitude": 117.011202
}, {
"latitude": 25.127221,
"longitude": 117.011749
}, {
"latitude": 25.129214,
"longitude": 117.026368
}, {
"latitude": 25.140962,
"longitude": 117.018798
}, {
"latitude": 25.140963,
"longitude": 117.022982
}, {
"latitude": 25.140302,
"longitude": 117.024828
}, {
"latitude": 25.137621,
"longitude": 117.027188
}, {
"latitude": 25.13463,
"longitude": 117.028776
}, {
"latitude": 25.132804,
"longitude": 117.030321
}],
"strokeWidth": 1,
"strokeColor": "#90EE90AD",
"fillColor": "#90EE90AD"
}]
}
},
created() {
this.getGeofence()
},
methods: {
getGeofence() {
const that = this
geofenceList(350802).then((res) => {
let code = res.code
if (code == 0) {
res.data.forEach(geofence => {
let path = geofence.points.split(";");
let geo = {
points: [],
strokeWidth: 1,
strokeColor: '#90EE90AD',
fillColor: '#90EE90AD'
}
if (path.length > 0) {
path.forEach((item) => {
let position = item.split(",").map(Number)
geo.points.push({
latitude: position[1],
longitude: position[0]
})
})
}
that.polygons.push(geo)
console.log(that.polygons)
})
} else {
let msg = res.msg
uni.showToast({
title: msg,
duration: 2000,
icon: 'none'
})
}
}).catch(err => {
console.log(err)
})
},
}
}
</script>
<style>
</style>
<template>
<view>
<map id="map" ref="map" :style="{width:'750rpx',height:500 +'px',}" :latitude="latitude" :longitude="longitude"
:scale="18" :polygons="polygons">
<!-- 变量替换绑定 polygon 可以显示 -->
<!-- 变量替换绑定 polygon 可以显示 -->
<!-- 变量替换绑定 polygon 可以显示 -->
</map>
</view>
</template>
<script>
import {
geofenceList
} from '../../api/address.js'
export default {
data() {
return {
latitude: 25.12905,
longitude: 117.031141,
polygons:[],
polygon: [{
"points": [{
"latitude": 25.12905,
"longitude": 117.031141
}, {
"latitude": 25.128205,
"longitude": 117.0326
}, {
"latitude": 25.126825,
"longitude": 117.031945
}, {
"latitude": 25.125436,
"longitude": 117.030958
}, {
"latitude": 25.1243,
"longitude": 117.029993
}, {
"latitude": 25.122794,
"longitude": 117.029553
}, {
"latitude": 25.121667,
"longitude": 117.030122
}, {
"latitude": 25.119763,
"longitude": 117.03098
}, {
"latitude": 25.118015,
"longitude": 117.031173
}, {
"latitude": 25.115771,
"longitude": 117.030476
}, {
"latitude": 25.114265,
"longitude": 117.029961
}, {
"latitude": 25.112594,
"longitude": 117.029607
}, {
"latitude": 25.112342,
"longitude": 117.028684
}, {
"latitude": 25.112079,
"longitude": 117.027203
}, {
"latitude": 25.111953,
"longitude": 117.026345
}, {
"latitude": 25.111613,
"longitude": 117.025755
}, {
"latitude": 25.111371,
"longitude": 117.024661
}, {
"latitude": 25.111283,
"longitude": 117.024028
}, {
"latitude": 25.111225,
"longitude": 117.022236
}, {
"latitude": 25.111186,
"longitude": 117.021624
}, {
"latitude": 25.111225,
"longitude": 117.020798
}, {
"latitude": 25.111186,
"longitude": 117.019747
}, {
"latitude": 25.111186,
"longitude": 117.018985
}, {
"latitude": 25.111244,
"longitude": 117.018277
}, {
"latitude": 25.111205,
"longitude": 117.017665
}, {
"latitude": 25.111244,
"longitude": 117.016206
}, {
"latitude": 25.111215,
"longitude": 117.01567
}, {
"latitude": 25.111302,
"longitude": 117.014522
}, {
"latitude": 25.111322,
"longitude": 117.013996
}, {
"latitude": 25.111215,
"longitude": 117.01332
}, {
"latitude": 25.111293,
"longitude": 117.012569
}, {
"latitude": 25.111322,
"longitude": 117.011786
}, {
"latitude": 25.111273,
"longitude": 117.010552
}, {
"latitude": 25.111254,
"longitude": 117.009855
}, {
"latitude": 25.11105,
"longitude": 117.009394
}, {
"latitude": 25.111128,
"longitude": 117.008599
}, {
"latitude": 25.111254,
"longitude": 117.00698
}, {
"latitude": 25.111254,
"longitude": 117.00625
}, {
"latitude": 25.111205,
"longitude": 117.005542
}, {
"latitude": 25.111127,
"longitude": 117.004576
}, {
"latitude": 25.11103,
"longitude": 117.00405
}, {
"latitude": 25.111409,
"longitude": 117.003761
}, {
"latitude": 25.112526,
"longitude": 117.003289
}, {
"latitude": 25.112653,
"longitude": 117.001926
}, {
"latitude": 25.112691,
"longitude": 117.000145
}, {
"latitude": 25.115134,
"longitude": 116.999195
}, {
"latitude": 25.116427,
"longitude": 116.997645
}, {
"latitude": 25.117753,
"longitude": 116.997205
}, {
"latitude": 25.119152,
"longitude": 116.997538
}, {
"latitude": 25.120351,
"longitude": 116.997286
}, {
"latitude": 25.120963,
"longitude": 116.996878
}, {
"latitude": 25.121595,
"longitude": 116.996524
}, {
"latitude": 25.12312,
"longitude": 116.996674
}, {
"latitude": 25.124868,
"longitude": 116.996868
}, {
"latitude": 25.127238,
"longitude": 116.997876
}, {
"latitude": 25.128307,
"longitude": 116.997747
}, {
"latitude": 25.129706,
"longitude": 116.997769
}, {
"latitude": 25.131687,
"longitude": 116.997876
}, {
"latitude": 25.133571,
"longitude": 116.998412
}, {
"latitude": 25.135378,
"longitude": 117.000172
}, {
"latitude": 25.137748,
"longitude": 117.001052
}, {
"latitude": 25.139613,
"longitude": 117.001138
}, {
"latitude": 25.141283,
"longitude": 117.001331
}, {
"latitude": 25.141808,
"longitude": 117.001803
}, {
"latitude": 25.141847,
"longitude": 117.003777
}, {
"latitude": 25.141594,
"longitude": 117.008562
}, {
"latitude": 25.142089,
"longitude": 117.010966
}, {
"latitude": 25.126743,
"longitude": 117.011202
}, {
"latitude": 25.127221,
"longitude": 117.011749
}, {
"latitude": 25.129214,
"longitude": 117.026368
}, {
"latitude": 25.140962,
"longitude": 117.018798
}, {
"latitude": 25.140963,
"longitude": 117.022982
}, {
"latitude": 25.140302,
"longitude": 117.024828
}, {
"latitude": 25.137621,
"longitude": 117.027188
}, {
"latitude": 25.13463,
"longitude": 117.028776
}, {
"latitude": 25.132804,
"longitude": 117.030321
}],
"strokeWidth": 1,
"strokeColor": "#90EE90AD",
"fillColor": "#90EE90AD"
}]
}
},
created() {
this.getGeofence()
},
methods: {
getGeofence() {
const that = this
geofenceList(350802).then((res) => {
let code = res.code
if (code == 0) {
res.data.forEach(geofence => {
let path = geofence.points.split(";");
let geo = {
points: [],
strokeWidth: 1,
strokeColor: '#90EE90AD',
fillColor: '#90EE90AD'
}
if (path.length > 0) {
path.forEach((item) => {
let position = item.split(",").map(Number)
geo.points.push({
latitude: position[1],
longitude: position[0]
})
})
}
that.polygons.push(geo)
console.log(that.polygons)
})
} else {
let msg = res.msg
uni.showToast({
title: msg,
duration: 2000,
icon: 'none'
})
}
}).catch(err => {
console.log(err)
})
},
}
}
</script>
<style>
</style>
操作步骤:
真机调试 nvue map 初始化后赋值无效 必须在data 里面写好绑定值
真机调试 nvue map 初始化后赋值无效 必须在data 里面写好绑定值
预期结果:
polygons 初始化后赋值有效
polygons 初始化后赋值有效
实际结果:
真机调试 nvue map 初始化后赋值无效 必须在data 里面写好绑定值
真机调试 nvue map 初始化后赋值无效 必须在data 里面写好绑定值
bug描述:
真机调试 nvue map 初始化后赋值无效 必须在data 里面写好绑定值
1***@qq.com
不行我试了
2022-12-01 13:03