小程序搜索定位导航
//app.json "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }
<!--pages/map/map.wxml--> <view class='list-guide'> <!-- 这里的坐标本应该是从服务器获取数据的,这时丈先写死在页面上了 --> <view class='list-guides' bindtap="onGuideTap" data-latitude="40.04452" data-longitude="116.294014" data-bankName="亿城·西山公馆停车场"> <image src='/images/marker.png' class='list-guide-imgae'></image> <text class='list-guide-text'>亿城·西山公馆停车场</text> </view> <view class='list-guides' bindtap="onGuideTap" data-latitude="39.790535" data-longitude="116.32502" data-bankName="宜家家居(西红门店)停车场-入口"> <image src='/images/marker.png' class='list-guide-imgae'></image> <text class='list-guide-text'>宜家家居(西红门店)停车场-入口</text> </view> <view class='list-guides' bindtap="onGuideTap" data-latitude="39.912144" data-longitude="116.37217" data-bankName="西单大悦城地下停车场"> <image src='/images/marker.png' class='list-guide-imgae'></image> <text class='list-guide-text'>西单大悦城地下停车场</text> </view> <view wx:for="{{city}}" wx:for-item='item' wx:key wx:for-index='index'> <view class='list-guides' bindtap="onGuideTap" data-latitude="{{item.latitude}}" data-longitude="{{item.longitude}}" data-bankName="{{item.name}}"> <image src='/images/marker.png' class='list-guide-imgae'></image> <text class='list-guide-text'>{{item.name}}</text> </view> </view> <view class="zdys" bindtap="mapzdy"> + 点击自定义前往地点 </view> </view> /* pages/map/map.wxss */ .map_container { height: 90vh; width: 100vw; } .list-guide { flex-direction: row; justify-content: space-around; border-top: 1px solid #ededed; height: 80rpx; } .list-guides { padding: 5rpx 20rpx; box-sizing: border-box; border-bottom: 1rpx solid rgb(236, 236, 236); } .list-guide-imgae { height: 40rpx; width: 30rpx; margin-right: 20px; vertical-align: middle; } .list-guide-text { vertical-align: middle; line-height: 90rpx; font-size: 30rpx; } .zdys { text-align: center; line-height: 120rpx; color: gray; }
//js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) {}, onShow() { this.setData({ city: wx.getStorageSync('value') }) }, //自定义 mapzdy() { var that = this wx.chooseLocation({ success(res) { console.log(res) var value = wx.getStorageSync('value') || [] if(res.name!=''){ value.push(res) //添加 }else{ wx.showToast({ title: '需勾选前往地点!', icon: 'none', duration: 1800 }) } wx.setStorageSync('value', value) console.log(wx.getStorageSync('value')) that.setData({ // hasLocation: true, location: formatLocation(res.longitude, res.latitude), address: res.address, }) }, fail: function () { wx.getSetting({ success: function (res) { var statu = res.authSetting; if (!statu['scope.userLocation']) { wx.showModal({ title: '是否授权当前位置', content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用', success: function (tip) { if (tip.confirm) { wx.openSetting({ success: function (data) { if (data.authSetting["scope.userLocation"] === true) { wx.showToast({ title: '授权成功', icon: 'success', duration: 1000 }) //授权成功之后,再调用chooseLocation选择地方 wx.chooseLocation({ success: function (res) { obj.setData({ addr: res.address }) }, }) } else { wx.showToast({ title: '授权失败', icon: 'success', duration: 1000 }) } } }) } } }) } }, fail: function (res) { wx.showToast({ title: '调用授权窗口失败', icon: 'success', duration: 1000 }) } }) } }) }, //导航 onGuideTap: function (event) { var lat = Number(event.currentTarget.dataset.latitude); var lon = Number(event.currentTarget.dataset.longitude); var bankName = event.currentTarget.dataset.bankname; console.log(lat); console.log(lon); wx.openLocation({ type: 'gcj02', latitude: lat, longitude: lon, name: bankName, scale: 28 }) }, })