• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序开发学习--获取位置信息

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、微信小程序地图展示位置信息

获取用户的位置信息,最开始使用了微信小程序提供的getlocation来获取用户的定位,能够得到用户的经纬度信息,(注:getloaction需要用户授权scope.userLocation)结合map组件能够得到用户的详细定位,代码如下:

<map id="map" longitude="{{location.longitude}}" latitude="{{location.latitude}}" scale="14" bindcontroltap="controltap" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100vh;"></map>
<button class='login' bindtap='loginView'>登录/注册</button>
 onLoad: function () {
      wx.getLocation({
        success: res=> {
          console.log(res);
          this.setData({
            location: res,
          })
          // console.log(app.globalData.location);
        },
      })
}

实现效果如下图:

微信小程序也支持在地图上选点,获取定位信息(wx.chooseLocation)和使用微信内置地图查看位置(wx.openLocation)

2、结合百度地图获取位置信息

微信小程序的接口,只能得到经纬度,但有时候我们需要得到具体的城市或者区域信息,这就需要借助百度地图了。

  •  第一步:先到百度开放平台http://lbsyun.baidu.com申请ak(链接地址为:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key
  •  第二步:在服务器配置中添加百度地图的服务器(https://api.baidu.com)
  • 第三步:下载百度地图的api ,链接:http://download.csdn.net/detail/michael_ouyang/9754015
  • 第四步:引入JS模块,将下载的js放到工程目录下
  • 第五步:在所需的js文件内导入js
    var bmap = require('../../libs/bmap-wx/bmap-wx.js'); 
  • 第六步:编辑代码 ,此处我获得的是城市信息,可以log出信息,选择自己要显示的信息,用setData的方式放入数据中进行展示即可
     var BMap = new bmap.BMapWX({   
            ak: that.data.ak,
        });   
            console.log(BMap)    
        var fail = function(data) {   
            console.log(data);  
        };   
        var success = function(data) {   
            //返回数据内,已经包含经纬度  
            console.log(data);  
            //使用wxMarkerData获取数据  
            //  = data.wxMarkerData;  
    wxMarkerData=data.originalData.result.addressComponent.city
            //把所有数据放在初始化data内  
            console.log(wxMarkerData)
            that.setData({   
                // markers: wxMarkerData,
                // latitude: wxMarkerData[0].latitude,  
                // longitude: wxMarkerData[0].longitude,  
                address: wxMarkerData 
            });  
        }   
        // 发起regeocoding检索请求   
        BMap.regeocoding({   
            fail: fail,   
            success: success  
        });      
      },

     

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap