微信小程序点击获取当前具体位置信息

逃离我推掉我的手 2022-12-20 02:56 394阅读 0赞

一，创建一个地图页面

Location

![20201110103959477.png][]

二，地图页面内容

1，Location.wxml什么都不用写

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

2，Location.js

const app = getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        longitude:0,//中心经度
        latitude:0,//中心纬度
        name:""//选择的位置名称
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
         this.moveToLocation()
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
      moveToLocation:function(){
        var that=this;
        wx.chooseLocation({
         success:res=>{
           console.log(res)
           let place=res.name
           wx.navigateTo({
             url: '/pages/task/task?place='+place,
           })
         },
         fail:err=>{
         console.log(err)
         }
        })
      },
    })

三，调用获取地图位置

1,点击获取位置在task.js页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

2，会跳转到刚才定义好的地图页面，然后选择好当前位置，然后传给task页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

3，调用页面内容

task.wxml

<view bindtap="getLocationPlace">
      点击获取位置
    </view>

task.js

onLoad: function (options) {
        console.log(options.place)//获取到Location页面传过来的位置名称
     
      },
    
    
      
    getLocationPlace(){
        wx.navigateTo({
          url: '/pages/Location/Location',
        })
      }

[20201110103959477.png]: /images/20221120/05d010211f6e4485bbce45ee3c753dfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221120/051880a646934bc48a9873de720f53fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201110104252923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201110104716377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70