本文主要是介绍uni-app中markers中iconPath如何使用网络地址,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
官方文档提到可以使用相对路径和临时地址,那么我们就通过下载网络图片生成临时地址实现。
<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 格式作为 iconPathconst base64 = uni.arrayBufferToBase64(res.data);this.markers[0].iconPath = "data:image/png;base64," + base64;},});},},
};
</script><style>
.map {width: 750rpx;height: 100%;
}
</style>
这篇关于uni-app中markers中iconPath如何使用网络地址的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!