收藏
回答

map组件中的markers二次添加参数无法显示图标,屏幕会移动到对应的地点,求大佬帮助?

我想要的效果是搜索到门店点击  , 点击之后地图上会出现地点对应的图标显示出来

但是现在的实际效果是 我点击了搜索到的图标之后    屏幕会移动到对应的坐标 ,但是这个坐标并不会显示图标,我再网上查了一下原因说的是markers只会初始化的时候渲染一次,可以用if来解决 ,   那我是否需要每一次搜索都  wx:if  来操作呢,除了这个方法还会有其他的方法吗 引用的是高德

//index.js
var amapFile = require('../../libs/amap-wx.js')
const config = require('../../libs/config.js')
const key = config.Config.key;
const myAmapFun = new amapFile.AMapWX({
  key: key
});
var markersData = [];
 
Page({
  data: {
    markers: [], //标记点
    latitude: '', //纬度
    longitude: '', //经度
    textData: {}, //显示详情
    show: true,
    tips: {}, //搜索值
    currentLocation: '', //获取当前经纬坐标
    city: '', //定位当前城市
    search: ''
  },
  //点击标记点时触发
  // makertap: function(e) {
  //   var id = e.markerId;
  //   var that = this;
  //   that.showMarkerInfo(markersData, id);
  // },
  onLoad: function() {
    var that = this;
         markersData.push({
          address: "天府大道北段1700号新世纪环球中心4F层",
          height: 32,
          iconPath: undefined,
          id: 0,
          latitude: "30.570162",
          longitude: "104.064716",
          name: "街电(泰香米泰国餐厅新世纪环球中心)",
          width: 22
        })
    // myAmapFun.getPoiAround({
    //   success: function(data) {
    //     markersData.push({
    //       address: "天府大道北段1700号新世纪环球中心4F层",
    //       height: 32,
    //       iconPath: undefined,
    //       id: 0,
    //       latitude: "30.570162",
    //       longitude: "104.064716",
    //       name: "街电(泰香米泰国餐厅新世纪环球中心)",
    //       width: 22
    //     })
    //     // console.log(data.markers)
    //     // markersData = data.markers;
    //     // console.log(markersData)
    //     that.setData({ //多个地点显示
    //       markers: markersData
    //     });
    //     // that.setData({
    //     //   latitude: markersData[0].latitude
    //     // });
    //     // that.setData({
    //     //   longitude: markersData[0].longitude
    //     // });
    //   },
    //   fail: function(info) {
    //     wx.showModal({
    //       title: info.errMsg
    //     })
    //   }
    // })
  },
 
  // 高德搜索框
  bindInput: function(e) {
    var that = this;
    var keywords = e.detail.value;
    that.setData({
      search: e.detail.value
    })
    that.searchApi(keywords, 1)
  },
  // 搜索下拉框点击选中门店
  bindSearch: function(e) {
    var keywords = e.target.dataset.keywords;
    this.searchApi(keywords, 2)
  },
 
  onReady: function(options) {
    var that = this;
    //获取当前坐标
    wx.getLocation({
      type: 'wgs84',
      altitude: true,
      success(res) {
        that.setData({
          currentLocation: res.longitude.toString() + "," + res.latitude.toString(),
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
    })
    //获取当前城市
    myAmapFun.getRegeo({
      location: this.data.currentLocation,
      extensions: "base",
      success: function(data) {
        that.setData({
          city: data[0].regeocodeData.addressComponent.city
        })
      }
    })
  },
 
   
  searchApi: function(keywords, type) {
    var that = this
    myAmapFun.getInputtips({
      keywords: keywords,
      radius: 3000,
      sortrule: 'distance',
      location: that.data.currentLocation,
      city: that.data.city,
      success: function(data) {
        if (data && data.tips) {
          if (type === 1) {
            that.setData({
              tips: data.tips
            });
          } else {
            that.setData({
              search: ''
            })
            that.setData({
              textData: {
                name: data.tips[0].name,
                desc: data.tips[0].address
              },
              show: false,
              markers: {
                address: data.tips[0].address,
                height: 32,
                iconPath: '../../images/place.png',
                id: 0,
                latitude: data.tips[0].location.split(',')[1],
                longitude: data.tips[0].location.split(',')[0],
                name: data.tips[0].name,
                width: 22
              },
              latitude: data.tips[0].location.split(',')[1],
              longitude: data.tips[0].location.split(',')[0],
            })
            // markersData = []
            markersData.push(that.data.markers)
            console.log(markersData)
          }
        }
      }
    })
  }
 
})


最后一次编辑于  11-07
回答关注问题邀请回答
收藏

1 个回答

问题标签