WeChat applet realizes navigation function

Hits: 0

  1. How to get the location through getLocation
    I won’t say much here. In my last article, I mentioned how the WeChat applet gets the location.
  2. You must convert your address to actual latitude and longitude for navigation , so use the Geocoding API. I am using the AutoNavi map geocoding API here. Please apply for the WeChat applet. The following picture is the result after application.

<!--wxml--> 
<!--My item here carries the address--> 
< view  data-item = "{{item}}"  catchtap = "daohang" > View location </ view >

//Get the address from the front end 
daohang: function ( e ) {
   var that = this ;
   console .log(e.currentTarget.dataset.item)
   var name=e.currentTarget.dataset.item.name
   var address=e. currentTarget.dataset.item.address;
  that.loadGEO(address,name)

},
//The address is converted to latitude and longitude 
loadGEO: function ( address,name ) {
  wx.request({
    url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
    data:{
      address:address,
      s: "rsx",
      city:cityname,
      sdkversion: "sdkversion",
      logversion: "logversion"
    },
    success(res){
      console .log(res.data)
       var address =res.data.geocodes[ 0 ].formatted_address
       //The return is a string like this "xxx.xx,xx.xxx" latitude and longitude, so it needs to be split Longitude and latitude are separated 
      var arr=res.data.geocodes[ 0 ].location.split( "," );
       console .log(arr)
       //To convert to numbers, use Number() here 
      var latitude= Number (arr[ 1 ]);
       var longitude = Number (arr[ 0 ]);
       console .log(latitude,longitude)
       //The map will be opened here
      wx.openLocation({
          latitude : latitude, //,latitude, 
          longitude:longitude , //longitude, 
          name: name, //location name 
          address:address, //specific address 
          scale: 15
        })
    }
  })
}

The final effect is as follows:
Note: You need to use the real machine to debug or preview to open

You may also like...

Leave a Reply

Your email address will not be published.