小程序搜索定位导航

//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;
   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;
   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
    })
  },

})