官方文档提到可以使用相对路径和临时地址,那么我们就通过下载网络图片生成临时地址实现。
<template>
<view class="map">
<uni-map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" />
</view>
</template>
<script>
export default {
data() {
return {
latitude: 30.660382,
longitude: 104.065304,
markers: [
{
latitude: 30.660382,
longitude: 104.065304,
iconPath: ''
},
],
};
},
mounted() {
this.loadImage(); // 加载网络图片的方法
},
methods: {
loadImage() {
uni.request({
url: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker
-default.png", // 网络图片地址
responseType: "arraybuffer",
success: (res) => {
// 转换请求到的二进制数据为 base64 格式作为 iconPath
const base64 = uni.arrayBufferToBase64(res.data);
this.markers[0].iconPath = "data:image/png;base64," + base64;
},
});
},
},
};
</script>
<style>
.map {
width: 750rpx;
height: 100%;
}
</style>