欢迎加入微信小程序开发交流qq群(173683895),里面有很多热心的大神会和你一起学习探讨开发中遇到的问题哦。
功能实现:
1. 根据后台传递过来的数据,包括地址名字,经纬度坐标等都展示在map组件上;
2. 点击相应地址实现用户当前位置导航至点击的目的地位置的功能。
3. 微信小程序内打开腾讯地图APP或者高德地图APP。
先上效果图
代码:
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;"></map>
// map.js var markers = [];//地图标记点 var callout = [];//地图标记点的气泡 var app = getApp() Page({ data: { marker_latitude: '', marker_longitude: '', }, onLoad() { var that = this; wx.request({ url: '' + app.globalData.subDomain + '/storelist.php?classid=76', headers: { 'Content-Type': 'application/json' }, success: function (res) { that.setData({ listData: res.data.result }) var listData = res.data.result; for (var i = 0; i < listData.length; i++) { markers = markers.concat({ iconPath: "/image/dizhi.png", id: listData[i].id, callout: { content: listData[i].title, fontSize: '32', padding: true, color:'#444', display: 'ALWAYS', textAlign: 'center', borderRadius: 15 }, latitude: listData[i].weidu, longitude: listData[i].jingdu, width: 20, height: 20 }); } console.log(markers) that.setData({ markers: markers, latitude: listData[0].weidu, longitude: listData[0].jingdu }) wx.getLocation({ type: 'wgs84', success: function (res) { var latitude = res.latitude var longitude = res.longitude that.setData({ // latitude: latitude, // longitude: longitude }) } }) } }) }, onShow() { }, regionchange(e) { console.log(e.type) }, markertap(e) { var that = this; console.log(e.markerId) for (var i = 0; i < this.data.listData.length; i++) { if (e.markerId == this.data.listData[i].id) { this.setData({ marker_latitude: this.data.listData[i].weidu, marker_longitude: this.data.listData[i].jingdu, title: this.data.listData[i].title }) } } wx.openLocation({ latitude: Number(that.data.marker_latitude), longitude: Number(that.data.marker_longitude), name: that.data.title, scale: 28 }) }, controltap(e) { console.log(e.controlId) } })
map{ height: 100%; } page{ height: 100%; }