实现地图功能利用微信内置的微信地图

最新推荐文章于 2024-11-15 09:30:00 发布

不理发的阿三

最新推荐文章于 2024-11-15 09:30:00 发布

阅读量2.4k

点赞数

分类专栏：小程序开发文章标签：小程序地图小程序地图

本文链接：https://blog.youkuaiyun.com/weixin_44079650/article/details/103269393

版权

小程序开发专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍如何在微信小程序中实现地图位置选择功能，通过调用wx.chooseLocation接口，轻松获取并显示用户选择的位置信息，包括经纬度和详细地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

查看微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html

其实不难，查看官方文档，一目了然

直接上代码：

map.wxml:


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

 <view>
 <view>纬度：{{location.latitude}}</view>
 <view>精度：{{location.longitude}}</view>
 <view>地址：{{location.address}}{{location.name}}</view>
 </view>

map.js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
   
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },
  //利用getLocation获取当前位置的经纬度坐标
  mapViewTap: function () {
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        console.log(res)
        wx.openLocation({
          latitude: res.latitude,
          longitude: res.longitude,
          scale: 28
        })
      }
    })
  },
 //wx.chooseLocation(OBJECT) 打开地图选择位置
  chooseMapViewTap:function(e){
    var that=this;
    wx.chooseLocation({
      success: function(res) {
        console.log(res);
        that.setData({
          location:{
            latitude:res.latitude,
            longitude: res.longitude,
            name:res.name,
            address:res.address
          }
        })
      },
    })

  },
})