marker那个图标由一个背景图片加上一张头像或者文字合并在一起
简单记录一下
<map id='map' :latitude="latitude" :longitude="longitude" :markers="markers"
:style="{ width: '100%', height: '100vh' }" :polyline="polyline" >
<cover-view slot="callout">
<block v-for="(item,index) in covers" :key="index">
<cover-view class="callout-wrap" :marker-id="index+1">
<cover-view class="content">
<cover-view class="title">定位详情</cover-view>
<cover-view class="item">
<cover-view class="label">定位时间:</cover-view>
<cover-view class="value">{{item.submitTime||'--'}}</cover-view>
</cover-view>
<cover-view class="item">
<cover-view class="label">定位类型:</cover-view>
<cover-view class="value">{{locationSource[item.locationSource]}}</cover-view>
</cover-view>
<cover-view class="item">
<cover-view class="label">定位地址:</cover-view>
<cover-view class="value">{{item.location||'--'}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
methods: {
...
// 添加marker
async addMarkers(positions) {
let p = positions[_index]
let iconPath = await this.drawImg(p.staffName, p.headImg)
this.covers.push(
Object.assign({}, {
show: false,
id: _index + 1,
iconPath: iconPath,
width: 45,
height: 68,
customCallout: {
anchorX: 0,
anchorY: 0,
display: 'BYCLICK' //'BYCLICK':点击显示; 'ALWAYS':常显
}
}, p)
)
_index++;
if (_index < positions.length) {
this.addMarkers(positions)
}
},
drawImg(name, img = null) {
let that = this
return new Promise(function(resolve, reject) {
const query = wx.createSelectorQuery()
query.select('#myCanvas').fields({node: true,size: true})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小 如果不加 图片文字会变形
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
const backImg = canvas.createImage();
backImg.src = '../../static/mapMarker.png';
backImg.onload = () => {
ctx.drawImage(backImg, 0, 0, 45, 68)
// 有图片画图片 无图画文字
const avatarImg = canvas.createImage();
avatarImg.src = that.$Common.getFileUrl(img);
console.log(that.$Common.getFileUrl(img))
avatarImg.onload = () => {
let x = 7,y = 7,r = 15;
let d = r * 2;
let cx = x + r;
let cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.strokeStyle = '#FFFFFF'; // 设置绘制圆形边框的颜色
ctx.stroke(); // 绘制出圆形,默认为黑色,可通过 ctx.strokeStyle = '#FFFFFF', 设置想要的颜色
ctx.clip();
ctx.drawImage(avatarImg, x, y, r * 2, r * 2)
wx.canvasToTempFilePath({
canvas: canvas,
width: 45,
height: 68,
success: (res) => {
resolve(res.tempFilePath)
},
fail(error) {
console.log(error)
reject(error)
}
});
}
}
})
})
},
}
//添加文字
ctx.fillStyle = '#4070FF'
ctx.font = `normal bold 18px sans-serif `
ctx.fillText('文字', 14, 28)
ctx.save()