小程序可以在地图加上商家图标吗

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

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

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)

}

})

},

五、效果截图

公司项目需要实现小程序地图的聚合以及轨迹回放，效果要与PC端一直。其中，轨迹回放还需要包含开始、暂停、结束三个按钮。效果图如下：

1、添加图标

2、聚合，其中，如果发现聚合点不开的情况，可以把grikSize的值设置小一点，默认值为60

3、点击图标，获取addMarker设置的  Id 值

4、定时画线条

同时，画线条之前，还需要清除按钮

1、在手机上打开微信，然后在微信主界面，点击下面的“发现”标签。

2、在打开的发现窗口中，点击“小程序‘菜单项。

3、在打开的微信小程序页面中，点击右上角的搜索按钮

4、接下来在搜索框中输入地图进行搜索，点击搜索结果中的腾讯地图菜单项。

5、这时我们的微信小程序马上定位到当前的位置，在地图页面顶部输入要到达的目的地

6、在搜索结果中点击路线按钮。

7、这时小程序就会给出导航的方案，选择其中一个方案，然后点击导航按钮就可以了。

---