微信小程序使用getLocation和openlocation获取位置和打开地图显示位置

使用getLocation和openlocation时需要在app.json做以下的配置才能正常使用
app.json:

"permission": {
    "scope.userLocation": {"desc": "aaa"}
  }

// pages/test/wxml.html

<button  bindtap="location">地图</button>

// pages/test/test.js

Page({
  data:{
		
  },
  location(event) {
    const that = this;
    wx.openLocation({
        latitude: that.data.latitude, // 纬度,范围为-90~90,负数表示南纬
        longitude: that.data.longitude, // 经度,范围为-180~180,负数表示西经
        scale: 28, // 缩放比例
        name: '这是那儿哦', // 位置名
        address: '当前位置定位...', // 地址的详细说明
        success: function(res){
            // success
        },
        fail: function() {
            // fail
        },
        complete: function() {
            // complete
        }
      })
    },

  onReady(){
      const that = this;
      console.log('onReady');
      wx.getLocation({
          type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
          success: function(res){
              // success
              console.log(res);
              that.setData({
                  latitude:res.latitude,
                  longitude:res.longitude,
              })
          },
      })
  },
})
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序中,可以使用微信提供的地图组件和位置API来实现从后台获取设备的经纬度,并在地图显示。具体步骤如下: 1. 在小程序页面中引入地图组件 在小程序页面的wxml文件中,可以使用`<map>`标签引入地图组件,例如: ``` <map id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" show-location markers="{{markers}}" style="width: 100%; height: 100%;"></map> ``` 其中,`latitude`和`longitude`分别为地图的中心点坐标,`markers`为标记点数组,用于在地图显示标记点。 2. 获取设备的经纬度 可以使用微信提供的wx.getLocation()接口来获取设备当前的经纬度信息。该接口会弹出授权框,需要用户授权获取地理位置信息。 示例代码: ``` wx.getLocation({ type: 'gcj02', // 返回可以用于wx.openLocation的经纬度 success (res) { const latitude = res.latitude const longitude = res.longitude // 将经纬度传递给地图组件中的latitude和longitude属性 that.setData({ latitude: latitude, longitude: longitude }) } }) ``` 3. 在地图显示标记点 可以使用wx.createMapContext()接口获取地图上下文对象,然后调用该对象的方法来添加标记点。 示例代码: ``` // 获取地图上下文对象 const myMap = wx.createMapContext('myMap') // 添加标记点 myMap.addMarkers({ markers: [{ id: 1, latitude: latitude, longitude: longitude, title: '我的位置', iconPath: '/images/location.png' }] }) ``` 以上是实现从后台获取设备的经纬度,并在地图显示的一般流程,开发者可以根据自己的需求进行相应的调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值