Wechat applet realizes map navigation + door-to-door recycling

List of articles

• Preface
• One 、 What needs to be prepared ？
• Two 、 Use steps
  • 1. Introduce packaged JS Code
  • 2. Interact with the background to access the surrounding geographic information
• summary

---

Preface

Use the wechat applet to get the map And related development

---

Tips ： The following is the main body of this article , The following cases can be used for reference

One 、 What needs to be prepared ？

If you use the map in the wechat applet You have to go to the official website of the app to apply for maps Key  This can be used in subsequent operations key To navigate

Two 、 Use steps

1. Introduce packaged JS Code

JavaScript The code is as follows （ Example ）：

export default class Http{

  request(url,data=[],method='get'){
    var header={}
    var token=wx.getStorageSync('token')
    if(token){
      header['Authization']=token
    }
    var openid=wx.getStorageSync('openid')
    if(openid){
      header['openid']=openid
    }
    var url='http://www.test.com/'+url  //  Fill in your own interface address here 
    return new Promise(function(resove,ret){
        wx.request({
          url,
          data,
          method,
          header,
          success:function(res){
            if(res.data=='token invalid '){
                wx.redirectTo({
                  url: '/pages/login/login',
                })
            }
              resove(res.data)
          },
          fail:function(ret){
           wx.showToast({
             title: ' request timeout , Please try again later ',
             icon:'error',
             duration:3000
           })
          }
        })
    })


  }


}

app.js Well sealed in the middle wx.login Function of  

Before using the map, you need to The current geographical location is set Use wx.getLocation Methods

// app.js
import Http from  "./utils/http";

let http=new Http()
App({
  onLaunch() {
    var openid=wx.getStorageSync('openid')
    if(!openid){
         //  Sign in 
        wx.login({
          success: res => {
            var data={code:res.code}
            http.request('api/wxlogin',data).then(ret=>{
              wx.setStorageSync('openid', ret.data.openid)
            })
          }
        })
    }

    wx.getLocation({
      success:(res)=>{
        wx.setStorageSync('lat', res.latitude)
        wx.setStorageSync('lon', res.longitude)
      }
    })
   
  },
  globalData: {
    userInfo: null
  }
})

When using wechat location Need to be in app.json Configure the relevant configurations

  "plugins": {
    "calendar": {
        "version": "1.1.0",
        "provider": "wx92c68dae5a8bb046" // Calendar APPID
    },
    "chooseLocation": {
      "version": "1.0.6",
      "provider": "wx76a9a06e5b4e693e" // The plug-in APPid
      },
      "routePlan": {
        "version": "1.0.12",
        "provider": "wx50b5593e81dd937a"
        }
  },
  "permission": {
    "scope.userLocation": {
    "desc": " Your location information will be used for applet location "
    }
}

2.  Interact with the background to access the surrounding geographic information

Map related operations （ Include surrounding addresses as well as Relevant route planning ）

wxml The code is as follows （ Example ）：

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{
   {latitude}}"
      longitude="{
   {longitude}}"
      markers="{
   {marks}}"
      covers="{
   {covers}}"
      show-location
    ></map>
  </view>
  <view wx:for="{
   {address}}" wx:key='key' class="address">
      <text style="float:left;">{
   {item.site_name}}</text>
      <text style="float:right;color:red;" bindtap="online" data-name="{
   {item.site_address}}" data-lat="{
   {item.lat}}" data-lon="{
   {item.lon}}"> Plan the route </text>
  </view>
</view>

wxss The code is as follows ：

.address{
  width: 80%;
  padding-left: 10%;
  font-size: 30rpx;
  height: 50rpx;
  margin-top: 20rpx;
  
}

JavaScript The code is as follows ：

// pages/map/map.js
import Http from '../../utils/http';
let http=new Http()
const chooseLocation = requirePlugin('chooseLocation')
Page({

  /**
   *  Initial data of the page 
   */
  data: {
    latitude: wx.getStorageSync('lat'),
    longitude: wx.getStorageSync('lon'),
    address:[],
    marks:[]
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad: function (options) {
    
    var that=this
      http.request('api/site',{lat:that.data.latitude,lon:that.data.longitude},'Post').then(ret=>{
          that.setData({address:ret.data})  //  Call the interface to get the surrounding geographical location 
      

      // Set punctuation 
      var marks=[]
      for(var i in ret.data){
        marks.push({
          'latitude':ret.data[i].lat,
          'longitude':ret.data[i].lon,
          'title':ret.data[i].site_name
        })
      }
     
      that.setData({marks})

    })

    this.mapCtx = wx.createMapContext('mapId')
  },

  

// Plan the route 
online(e){
  var data=e.currentTarget.dataset
  let plugin = requirePlugin('routePlan');
  let key = '';  // Using the application in Tencent location service key
  let referer = '';   // Calling the plug-in app The name of 
  let endPoint = JSON.stringify({  // End 
      'name': data.name,
      'latitude': data.lat,
      'longitude': data.lon
  });
  wx.navigateTo({
      url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
  });


},

onshow(){
  const location = chooseLocation.getLocation(); //  If you click the confirm selection button , Then the selected point result object is returned , Otherwise return to null
  if(location !=null){
    
    this.setData({
      latitude: location.latitude,
      longitude:location.longitude,
      address:location.name
    })
  }
},

  /**
   *  Life cycle function -- Listening page first rendering completed 
   */
  onReady: function () {

  },

  /**
   *  Life cycle function -- Monitor page display 
   */
  onShow: function () {

  },

  /**
   *  Life cycle function -- Monitor page hidden 
   */
  onHide: function () {

  },

  /**
   *  Life cycle function -- Monitor page uninstall 
   */
  onUnload: function () {

  },

  /**
   *  Page related event handler -- Monitor user pull-down action 
   */
  onPullDownRefresh: function () {

  },

  /**
   *  Handling function of page pull bottom event 
   */
  onReachBottom: function () {

  },

  /**
   *  Users click the upper right corner to share 
   */
  onShareAppMessage: function () {

  }
})

---

summary

Use Tencent location and you're done