我想要的效果是搜索到门店点击 ， 点击之后地图上会出现地点对应的图标显示出来
但是现在的实际效果是 我点击了搜索到的图标之后 屏幕会移动到对应的坐标 ，但是这个坐标并不会显示图标，我再网上查了一下原因说的是markers只会初始化的时候渲染一次，可以用if来解决 ， 那我是否需要每一次搜索都 wx:if 来操作呢，除了这个方法还会有其他的方法吗 引用的是高德
//index.jsvar 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) } } } }) }}) |
上代码片段吧
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html