WeChat applet to obtain the current location, longitude, latitude and map display

This article mainly introduces the WeChat applet to obtain the current location, longitude, latitude and map display. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

I have just started to contact you recently. WeChat applet, after understanding its structure and related interfaces, we are ready to implement a small program. Its functions include - obtaining the longitude and latitude of the user's current location, viewing the location on the map, and obtaining the longitude and latitude of different locations through the map.

I just started to get in touch with WeChat mini programs recently. After understanding its structure and related interfaces, I am ready to implement a mini program. Its functions include--get the longitude and latitude of the user's current location, view the location on the map, and use the map to Get the latitude and longitude of different locations.

The main part of the WeChat applet includes:

New pages need to be configured in app.json:

 "pages":[
  "pages/index/index",
  "pages/location/location",
  "pages/logs/logs"
 ]

By calling bindtap in the view layer to match the method in the logic layer - page jump:

View layer

 <view class="location" bindtap="locationViewTap">
  <button>获取用户当前位置</button>
 </view>

Logical layer

 locationViewTap: function(){
  wx.navigateTo({
   url: '../location/location'
  })
 }

Match the method in the logic layer by calling bindtap in the view layer--implement method call:

View layer

  <button bindtap="mapViewTap" style="margin:10px">查看地图</button>
  <button bindtap="chooseMapViewTap" style="margin:10px">选择位置</button>

Logic layer

 mapViewTap:function(){
    wx.getLocation({
     type: 'gcj02', //返回可以用于wx.openLocation的经纬度
     success: function(res) {
      console.log(res)
      wx.openLocation({
       latitude: res.latitude,
       longitude: res.longitude,
       scale: 28
      })
    }
   })
 }

Three interfaces related to map location:

(1) wx.getLocation(OBJECT) Get the current geographical location and speed

success return parameters:

##longitudeLongitude, floating point Point number, range is -180~180, negative number represents west longitudespeed Speed, floating point number, unit m/saccuracyAccuracy of location

latitude	Latitude, floating point number, range is -90~90, negative number represents south latitude

(2) wx.openLocation(OBJECT) Use WeChat’s built-in map to view the location

OBJECT parameter description:

ParameterTypeRequiredDescriptionlatitudeFloat is the latitude, ranging from -90~90, negative numbers represent south latitudelongitudeFloat is longitude, the range is -180~180, negative numbers represent west longitude scaleINTNoScale ratio, range 5~18, default is 18nameStringNoLocation nameaddressStringNoDetailed description of addresssuccessFunctionNoCallback function for successful interface callfailFunctionNoCallback function for failure of interface callcompleteFunctionNoThe callback function at the end of the interface call (will be executed if the call is successful or failed)(3) wx .chooseLocation(OBJECT) Open the map and select a location

successReturn parameters:

nameLocation nameaddressDetailed addresslatitudeLatitude, floating point number, range is -90~90, negative number indicates south latitudelongitudeLongitude, floating point number, range is -180~180, negative number represents west longitude

Implementation effect

Use getLocation to obtain the latitude and longitude coordinates of the current location, openLocation to open the WeChat built-in map to view

　

Use chooseLocation to select a location and display the longitude and latitude of the location information in real time

##Notes:

(1) There are only two map parameter information obtained by using getLocation()

The parameters returned by chooselocation are as follows:

    

(2) this.setData modifies the value in json

The json data in the logical layer can be displayed through the WXML file {{json}}:

　　

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to Gesture Unlocking in WeChat Mini Program Development

About WeChat Mini Program Introduction to interface development

The above is the detailed content of WeChat applet to obtain the current location, longitude, latitude and map display. For more information, please follow other related articles on the PHP Chinese website!