[小程序开发]在地图上标记头像并显示名字

2022年11月25日 12:11 by wst

小程序

---

小程序开发过程中，我们怎么标记每个人的位置，并显示头像呢？

下面对这个功能进行演示，代码如下：

基础版本库：2.24.7

pages/onemap/onemap.wxml

<map 
  id="myMap" 
  style="width: 710rpx; height: 300px;" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}" 
  markers="{{markers}}" 
  show-location>
</map>

pages/onemap/onemap.wxss

map{
  margin: 20rpx;
}

pages/onemap/onemap.js

Page({
  data: {
    latitude: 39.944126,
    longitude: 116.453766,
    markers: [],
  },
  onReady: function (e) {
    //创建 map 上下文 MapContext 对象。
    this.mapCtx = wx.createMapContext('myMap')
    // 设置边界
    const pos = {
      southwest: {
        latitude: 39.944092,
        longitude: 116.453605,
      },
      northeast: {
        latitude: 39.944293,
        longitude: 116.454098,
      }
    }
    // 设置地图边界
    this.mapCtx.setBoundary(pos)
    // 渲染标注点
    const marks = [
      {id: 1, title: '李易峰', latitude:39.944262, longitude: 116.453782, iconPath: "http://www.wanhuqianjia.com/static/wximg/%E6%9D%8E%E6%98%93%E5%B3%B0-modified.png", width: 50, height: 50,  label: {content: '李易峰', anchorX: 10, anchorY: -25, color: 'red'}},
      {id: 2, title: '陈冠希', latitude: 39.944207, longitude: 116.453823,  iconPath: "http://www.wanhuqianjia.com/static/wximg/%E9%99%88%E5%86%A0%E5%B8%8C-modified.png", width: 50, height: 50, label: {content: '陈冠希', anchorX: 10, anchorY: -25, color: 'red'}},
      {id: 3, title: '张一山', latitude: 39.944259, longitude: 116.454053,  iconPath: "http://www.wanhuqianjia.com/static/wximg/%E5%BC%A0%E4%B8%80%E5%B1%B1-modified.png", width: 50, height: 50, label: {content: '张一山', anchorX: 10, anchorY: -25, color: 'red'}},
      {id: 4, title: '杨紫', latitude: 39.944145, longitude: 116.453937,  iconPath: "http://www.wanhuqianjia.com/static/wximg/%E6%9D%A8%E7%B4%AB-modified.png", width: 50, height: 50, label: {content: '杨紫', anchorX: 10, anchorY: -25, color: 'red'}},
      {id: 5, title: '赵丽颖', latitude: 39.94415, longitude: 116.453651,  iconPath: "http://www.wanhuqianjia.com/static/wximg/%E8%B5%B5%E4%B8%BD%E9%A2%96-modified.png", width: 50, height: 50, label: {content: '赵丽颖', anchorX: 10, anchorY: -25, color: 'red'}},
    ]
    this.setData({markers: marks})
  },
  //获取当前地图的缩放级别
  scaleClick: function(){
    this.mapCtx.getScale({
      success: function (res) {
        console.log(res.scale)
      }
    })
  },
  //获取当前地图的视野范围
  getRegionClick: function () {
    this.mapCtx.getRegion({
      success: function (res) {
        console.log(res.southwest)
        console.log(res.northeast)
      }
    })
  }
})

效果如下：

 源代码：下载

---