刘洋博客
猥琐发育别浪
微信小程序地图添加marker自定义图标
admin (2023-03-02)|211次阅读

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()