收藏
回答

map组件动态添加marker,数据添加了,但是marker没有渲染出来?

如题。

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" wx:if="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
<button bindtap='addMarker'>添加marker</button>


Page({
  data: {
    markers: [{
      iconPath: "/images/logo.jpeg",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/images/logo.jpeg',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }],
    centerLat:0,
    centerLng:0,
    mapCtx:{},
    id:0,
  },
  onLoad(){
    let mark = {
          title:'标注点'+5,
          iconPath: "/images/logo.jpeg",
          id: 7,
          latitude: 23.098994,
          longitude: 113.326520,
          width: 50,
          height: 50,
          label:{
            content:"我是店铺"+this.data.id,
            color:'#887766',
            fontSize:15,
            anchorX:23.098994,
            anchorY:113.326520,


          },
        }
        this.addMarks(mark)
  },
  onReady(){
    this.mapCtx = wx.createMapContext('map')
  },
  regionchange(e) {
    console.log(e)
    console.log(e.type)
    this.getCenterLocation(e)
  },
  addMarker(){
    let mark = {
      title:'标注点'+100,
      iconPath: "/images/logo.jpeg",
      id: 7,
      latitude: 23.098994,
      longitude: 113.326520,
      width: 50,
      height: 50,
      label:{
        content:"我是店铺"+this.data.id,
        color:'#887766',
        fontSize:15,
        anchorX:23.096994,
        anchorY:113.325520,
      },
    }
    this.addMarks(mark)
  },
  addMarks(mark){
    console.log(this.data.markers)
    console.log(mark)
    this.data.markers.push(mark)
  },
  getCenterLocation(e){
    console.log(11)
    let that = this
    if (e.type == 'end'&&e.causedBy == 'drag') {
      that.mapCtx.getCenterLocation({
        success(res) {
          that.setData({
            centerLat: res.latitude,
            centerLng: res.longitude
          })
          that.data.id = that.data.id+1
          let mark = {
            title:'标注点'+that.data.id,
            iconPath: "/images/logo.jpeg",
            id: that.data.id,
            latitude: res.latitude,
            longitude: res.longitude,
            width: 50,
            height: 50,
            label:{
              content:"我是店铺"+that.data.id,
              color:'#887766',
              fontSize:15,
              anchorX:res.latitude,
              anchorY:res.longitude,


            },
          }
          that.addMarks(mark)
          //that.moveGetUsers()
        }
      })
    }
  },
  markertap(e) {
    console.log(e.detail.markerId)
  },
  controltap(e) {
    console.log(e.detail.controlId)
  }
})
回答关注问题邀请回答
收藏

1 个回答

  • 老张
    老张
    2020-10-19

    还有你搞不定的?看不懂你的。贴一段以前的代码吧:

    wxml:

    <wxs src='./index.wxs' module="u" />
    
      <map
        id="map"
        scale="{{sam?12:16}}"
        longitude='{{geo[0]}}'
        latitude='{{geo[1]}}'
        markers="{{u.getMarkers(group)}}"
        circles="{{u.getCircles(group)}}"
        show-location
        style="width: 100%; height: 100%;"
      >
    
    


    wxs:

    function getMarkers  (group) {
      if(!group) return
      var markers = []
      var locs = group.locs || []
      var l = locs.length
      for (var i = 0; i < l; i++) {
        var marker = {
          iconPath: "/image/roomred.png",
          id: i,
          latitude: locs[i].latitude,
          longitude: locs[i].longitude,
          width: 20,
          height: 20,
        }
        markers.push(marker)
      }
      return markers
    }
    
    2020-10-19
    有用
    回复 2
    • 吴奕群
      吴奕群
      2020-10-19
      有,哈哈哈,上面这个就遇到了,有啥法子吗?还是我的姿势不对
      2020-10-19
      回复
    • 老张
      老张
      2020-10-19回复吴奕群
      看不懂你的。贴了一段自己的代码。
      2020-10-19
      回复
登录 后发表内容
问题标签