微信小程序如何嵌入全景图展示?

微信小程序想要加入全景图的话可以通过链接跳转或代码植入的方式实现。链接跳转巧轿则就是在微信小程序内加入720VR全景图的帆简链接，用户只要点击就可以进入全景图。代码植入是将720VR全景图的代码直接植入小程序代码中，用户只要打开小程序就可以在相应孝棚位置看到全景图的展示。

一、在开发微信小程序地图的过程中，有这样一个需求，用户发表祝福语，然后存入数据库，可以在地图上显示用户头像并且点击用户头像时显示祝福语。

二枯并、自己在开发时遇到的问题：

1.微信头像是网络图片，而地图的没纳迹markers中的iconPath只能使用本地图片

2.将网络图片缓存到本地，但是因为小程序的异步执行导致图片不能显示

三、解决办法：

1.解决微信头像是网络图片的问题，可以使用wx.downloadFile({})方法来将头像缓存到本地，然后再将本地路径赋给iconPath即可，第一个不能使用网络图片的问题解决。

2.异步请求导致本地缓存的图片不能在地图上显示，我的解决办法是，先通过request请求获取到祝福语茄宽后，用for循环赋值给markers，iconPath路径填写一个本地路径，同时调用一个方法，获取当前用户头像的本地缓存路径，获取成功后赋值给markers中每个对象的iconPath，所以一般来说，地图上的图片会有切换，首先显示的是本地的统一的图片，经过一段时间的请求后，图片一个个变为用户头像。

四、相关 *** 作代码

getBlessing: function(){

var that = this

var getUserPic = function (pic_url,i) {

let cachePath

if(pic_url==null || pic_url=='') return

wx.downloadFile({

url: pic_url,

success: (pathInfo) =>{

// pathInfo.path 这是下载成的缓存链接，模拟器marker有时不支持http开头，真机不影响，得去掉http:/

cachePath = pathInfo.tempFilePath.replace("http:/", '').replace("https:/", '')//真机中无需replace，都支持，

var mak = "markers[" + i +"].iconPath"

that.setData({

[mak]: cachePath

})

}

})

}

wx.request({

url: '你的后台请求地址',

method: 'POST',

success: function (res) {

var list = res.data.list

var tempArr = []

var includeArr = []

var item = {}

var includeItem = {}

for (var i = 0i <list.lengthi++) {

var pic = getUserPic(list[i].user.user_pic,i)

item = {

iconPath: '/images/icon/small-logo.png',

id: list[i].id,

latitude: list[i].latitude,

longitude: list[i].longitude,

width: 30,

height: 30,

alpha: 0.8,

callout: {

content: list[i].content,

color: '#FFFFFF',

fontSize: 10,

borderRadius: 10,

bgColor: '#F44336',

padding: 5,

display: 'BYCLICK',//'BYCLICK':点击显示'ALWAYS':常显

}

}

includeItem = {

latitude: list[i].latitude,

longitude: list[i].longitude,

}

tempArr.push(item)

includeArr.push(includeItem)

}

that.setData({

markers: tempArr,

includepoints: includeArr,

count: res.data.count

})

console.log(that.data.markers)

}

})

},

五、效果截图

标记点markers只能在初始化的时候设置，不支持动态更告樱裂新。

示例：

<!-- map.wxml --> <map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375pxheight: 200px"></map> // map.js Page({ data: {markers: [{ latitude: 23.099994, longitude: 113.324520, name: 'T.I.T 创意园'袜闭, desc: '我现在的位置'}],covers: [{ latitude: 23.099794, longitude: 113.324520, icaonPath: '../images/car.png', rotate: 10}, { latitude: 23.099298, longitude: 113.324129, iconPath: '../颂滚images/car.png', rotate: 90}] } })

---