微信小程序获取后台地址实现地图导航

先看效果图：
1、
微信小程序获取后台地址实现地图导航
2、

3、

4、

5、

源码：
WXML

<view class='flex-wrp'style="flex-direction:row;">
    
    <view wx:for="{{ContactInformation}}" wx:for-index='key' wx:for-item='item'>

      <view class='flex-item' style='margin-top: 20rpx;'>
        <text decode="{{true}}" style='font-size: 35rpx;'>&emsp;联系人：</text>
        <text decode="{{true}}" class='font-text' style='font-size: 30rpx;'>&nbsp;{{item.Contacts}}</text>
      </view>
      <view class='flex-item' style='margin-top: 20rpx;'>
        <text decode="{{true}}" style='font-size: 35rpx;'>&emsp;电话：</text>
        <text decode="{{true}}" class='font-text' style='font-size: 30rpx;'>&nbsp;{{item.ContactNumber}}</text>
      </view>
      <view class='flex-item' style='margin-top: 20rpx;'>
        <text decode="{{true}}" style='font-size: 35rpx;'>&emsp;地址：</text>
        <text decode="{{true}}" class='font-text' style='font-size: 30rpx;'>&nbsp;{{item.UserAddress}}</text>
      </view>
      <view class='flex-item' style='margin-top: 20rpx;'>
        <text decode="{{true}}" style='font-size: 35rpx;'>&emsp;当前位置：</text>
        <text decode="{{true}}" class='font-text' style='font-size: 30rpx;'>&nbsp;广州市南沙区兴业路</text>
      </view>

    </view>
</view>
  <!--中间 地图  bindregion 拖拽触发事件 circles -->
<form bindsubmit="openLocation">
<view class='view'>

  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" bindmarkertap="makertap" markers="{{markers}}" show-location="true" scale="14">
  </map>

<!-- <map id="map" longitude="116.715790" latitude="23.362490" markers="{{markers}}"
scale="18"  style="width: 100%; height: 300px;" bindtap="click">
</map> -->

</view>


  <cover-view class='foot'>    
                
    <button class='float-left width-but'style='background-color: #4e9598;color:#fffbfc;'formType="submit">打开导航</button>

    <button class='float-right width-but'style='background-color: #4e9598;color:#fffbfc;'bindtap='bindtap_AscertainVisit'>确定上门</button>

  </cover-view>
</form>

WXSS:

.font-text{
   color: rgba(156, 152, 152, 0.973)
 }

.view {
  margin-top:20rpx;
  width: 100%;
  height: 100%;
}

map {
  width: 100%;
  height: 1000rpx;
  /* background-color: rgb(198, 234, 255); */
}

.foot{
  position:fixed; 
  bottom:0;
  width: 750rpx; 
  height:8%;
  background-color: #4e9598;
  align-items: center;
}
.float-left{
  float: left;
}
.float-right{
  float: right;
}
.view-center{
  /* font-weight: bold; */
  margin-top: 30rpx;
  color:#fffbfc;
  /* justify-content: center;  */ 
  display:  inline-flex;
  
}
.width-but{
  width: 290rpx;
}

JS:

 onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '地图导航'
    });
	var that = this
    wx.showLoading({
      title: "定位中",
      mask: true
    })
    wx.getLocation({
      type: 'gcj02',
      altitude: true,//高精度定位
      //定位成功，更新定位结果
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy

        that.setData({
          longitude: longitude,
          latitude: latitude,
          speed: speed,
          accuracy: accuracy
        })
      },
      //定位失败回调
      fail: function () {
        wx.showToast({
          title: "定位失败",
          icon: "none"
        })
      },

      complete: function () {
        //隐藏定位中信息进度
        wx.hideLoading()
      },


    })



  },

// 打开导航
  openLocation: function (e) {
    //var value = e.detail.value
    
    wx.openLocation({
      latitude: Latitude,  // 要去的地址经度，浮点数
      longitude: Longitude,  // 要去的地址纬度，浮点数
      name: UserAddress,  // 位置名
      address: UserAddress,  // 要去的地址详情说明
      scale: 18,   // 地图缩放级别,整形值,范围从1~28。默认为最大
    });
  },

微信小程序获取后台地址实现地图导航

相关推荐