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

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

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

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、进入-我的，可以对标点进行管理，编辑（重新这个标点位置信息），下载标点二维码（进行线下推广），或者将标点设置显示或隐藏。

地图标注的作用渗猛敏说明

地图标注有什么用地图标注不仅仅只是一个显示位置的作用它可以显示我们的店铺信息，产品介绍，营业的时间段，有无停车场，店铺收费方知尺式等等它方便的不是只有顾客，还有我们本身的店铺。既避免出现接到客户电话询问找不到店铺的问题，还可以节省我们的人工成本，更有效解决出现的问题。

---