uniapp nvue map marker 可以加载gif 可以的话 怎么进行加载
1***@qq.com
- 发布：2024-08-22 18:45
- 更新：2024-11-26 16:56
- 阅读：195
<template>
<view>
<map id="test_map" style="width: 750rpx; height: 300px;" :show-location="true" :markers="markers"
:longitude="map.longitude" :latitude="map.latitude">
</map>
<button @click="dingwei">添加marker</button>
</view>
</template>
<script>
export default {
data() {
return {
map: {
longitude: '', //经度
latitude: '', //纬度
},
markers: [{
id: 1,
latitude: '39.9496252',
longitude: '116.3485888',
iconPath: '/static/app-plus/location@3x.png',
width: 32,
height: 32
}]
}
},
onLoad() {
let _this = this;
uni.getLocation({
type: 'gcj02',
success: function(res) {
console.log(res)
_this.map.longitude = res.longitude;
_this.map.latitude = res.latitude;
}
});
},
methods: {
dingwei() {
const context = uni.createMapContext('test_map', this)
let obj = {
id: this.markers.length+2,
latitude: '39.9496252',
longitude: '116.3485888',
iconPath: `/static/giphy.gif`,
width: 50,
height: 50
}
this.markers.push(obj)
context.addMarkers({
markers:this.markers
})
}
}
}
</script>
<style scoped>
</style>1***@qq.com (作者)
<template>
<view>
<map id="test_map" style="width: 750rpx; height: 300px;" :show-location="true" :markers="markers"
:longitude="map.longitude" :latitude="map.latitude">
</map>
<button @click="dingwei">添加marker</button>
</view>
</template>
<script>
export default {
data() {
return {
map: {
longitude: '', //经度
latitude: '', //纬度
},
markers: [{
id: 1,
latitude: '39.9496252',
longitude: '116.3485888',
iconPath: '/static/test.gif',
width: 32,
height: 32
}]
}
},
onLoad() {
let _this = this;
uni.getLocation({
type: 'gcj02',
success: function(res) {
console.log(res)
_this.map.longitude = res.longitude;
_this.map.latitude = res.latitude;
}
});
},
methods: {
dingwei() {
const context = uni.createMapContext('test_map', this)
let obj = {
id: this.markers.length+2,
latitude: '39.9496252',
longitude: '116.3485888',
iconPath: '',
width: 50,
height: 50
}
this.markers.push(obj)
context.addMarkers({
markers:this.markers
})
}
}
}
</script>
<style scoped>
</style>
1***@qq.com (作者)
请问怎么弄的 可以贴一部分代码吗 我测试gif 展示的是默认图一个圆的标记点
2024-08-23 09:12
DCloud_UNI_yuhe
回复 1***@qq.com: 代码见下面，你是哪个平台出现的问题，vue几
2024-08-23 09:21
1***@qq.com (作者)
回复 DCloud_UNI_yuhe: vue2 uveiw2 nvue
2024-08-23 09:28
1***@qq.com (作者)
回复 DCloud_UNI_yuhe: 我尝试了你贴的代码 gif 还是没有 展示的还是 默认的标记点
能否讲一下 你测试的架构
2024-08-23 09:34
1***@qq.com (作者)
回复 DCloud_UNI_yuhe: 我新建了一个项目测试 还是gif无法加载 gif 以外的png，jpg 图片均可加载
2024-08-23 09:53
DCloud_UNI_yuhe
回复 1***@qq.com: 哪个平台出现的，android ios 还是小程序
2024-08-23 09:55
1***@qq.com (作者)
回复 DCloud_UNI_yuhe: android
2024-08-23 11:25