基于微信map组件完成地图标点

最新推荐文章于 2025-02-20 11:14:08 发布

洗头要用霸王

最新推荐文章于 2025-02-20 11:14:08 发布

阅读量340

点赞数

文章标签：前端 uni-app 微信小程序

本文链接：https://blog.youkuaiyun.com/m0_59722227/article/details/129004099

版权

该文章描述了如何在微信小程序中使用WXML和JS文件实现地图功能，包括设置地图组件，获取用户定位，处理数据以创建气泡标记显示位置信息，以及自定义气泡图标的逻辑。同时，文章涵盖了错误处理和数据遍历的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果展示：

wxml:

<map id="map"  markers="{{markers}}" bindmarkertap="markertap" show-location longitude='{{lng}}' latitude='{{lat}}' class='map' show-location="{{true}} "  catchtap="bindtap_Z">

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

具体参数请点击上方链接

js文件

data: {
    lat:'',
    lng:'',
    Locationlist: [],
    onshow:false,
    markers: [],
    markertapid:0,
  
    images: [],//图片
    canUploadImages:0, //是否能上传图片 1.是 0.否
    include_points:[], // 所以点位
    mapCtx :''
  },
 onReady() {
    this.$popup = this.selectComponent('.popup-component')
    this.$photoPopup = this.selectComponent('.popup-photo')
    this.setData({ // 获取map组件实例
      mapCtx: wx.createMapContext('map')
    })
    this.getPositioning() // 获取定位 
    
  },
  

  async getPositioning() {
    const that = this
    let lat = ''
    let lng = ''
    await app.getSelfLocation().then(res => { // 这里可以用wx提供的api获取定位
      if (res) {
        that.setData({
          lng : res.curLng,
          lat : res.curLat
        })
      } else {
        this.$toast('获取定位失败')
      }

    })
    const params = {
       // 接口所需参数
    }

     request({
      url: '',
      data: params,
    }).then( res =>  {

    let markers = [];
    this.setData({
      Locationlist:res.data.data
    })
    this.data.Locationlist.forEach((item,i)=> { // 提取返回数据，首页自动展示所有定位
      this.data.include_points.push({
        longitude:Number(item.community.lng),
        latitude:Number(item.community.lat)
      })
      
    })
    this.data.mapCtx.includePoints({ // 
      padding: [ 80,80,80,80], // 修改页面缩放比例
      points:this.data.include_points
    })
    for (let i = 0; i < res.data.data.length; i++) {
      
      let marker = that.createMarker(res.data.data[i].community,res.data.data[i].isFinish);
      marker.id = i
      markers.push(marker)
    }
    that.setData({
      markers: markers,
    })
    
    }).catch(err => {
      console.log(err);
    })

  },
  createMarker(point,i) { // 对数据进行处理 map标点
    let marker = {
      iconPath: i == '1' ? '../../static/image/okweizhi.png' : '../../static/image/noweizhi.png', // 这是气泡的样式 可以从阿里icon下载自己需要的图标，我这需要显示到达和未到达的两种样式，在这加了个判断
      pid:point.id,
      title: point.name || '', 
      latitude:Number(point.lat),
      longitude: Number(point.lng),
      state:i,
      width: 30,
      height: 30,
      callout:{
        content:point.name,
        anchorY: 0,
        borderRadius:10,
        padding:10,
        anchorX: 0,
        display: 'BYCLICK', // 点击时显示气泡 这里再调试器上显示不出来，手机上功能正常
        textAlign:'center',
      }
    };
    return marker;
  },