小程序模板网

使用高德地图获取当前位置具体信息

2018-04-17 凤尾花

如题,这是我之前做的小程序中获取位置信息部分,用户只能进行“拒绝”或“允许”获取位置信息操作,“拒绝”则获取位置失败,“允许”则获取用户所在位置信息(该操作只在后台执行,不打开地图查看位置,不能选择、移动、改变位置,这也是我当时没用小程序提供的API的原因,我要的就是用户的位置,不能随意改变)

index.wxml

 

  1. <view class="container">
  2.  
  3. <view class="resultPart">
  4.  
  5. <text>当前位置:</text>
  6.  
  7. <text class="resTxt">{{result}}</text>
  8.  
  9. </view>
  10.  
  11. </view>

index.wxss

 

  1. .resultPart{
  2.  
  3. width:80%;
  4.  
  5. display:flex;
  6.  
  7. flex-direction:column;
  8.  
  9. align-items:center;
  10.  
  11. }
  12.  
  13.  
  14.  
  15. .resTxt{
  16.  
  17. padding-top:40rpx;
  18.  
  19. color:blue;
  20.  
  21. }

index.js

 

  1. var amapFile = require('../../utils/amap-wx.js');
  2.  
  3. Page({
  4.  
  5. data: {
  6.  
  7. result:''
  8.  
  9. },
  10.  
  11. onLoad: function () {
  12.  
  13. console.log('onLoad');
  14.  
  15. this.getLocation();
  16.  
  17. },
  18.  
  19. getLocation:function(){
  20.  
  21. var _this = this;
  22.  
  23. var myAmapFun = new amapFile.AMapWX({key:'xxxxxxxx'});//key注册高德地图开发者
  24.  
  25. myAmapFun.getRegeo({
  26.  
  27. success: function(data){
  28.  
  29. console.log('getLocation success');
  30.  
  31. _this.setData({
  32.  
  33. result:data[0].name+' '+data[0].desc
  34.  
  35. });
  36.  
  37. },
  38.  
  39. fail: function(info){
  40.  
  41. console.log("getLocation fail");
  42.  
  43. wx.showModal({title:info.errMsg});
  44.  
  45. _this.setData({
  46.  
  47. result:'获取位置失败!'
  48.  
  49. });
  50.  
  51. }
  52.  
  53. });
  54.  
  55. }
  56.  
  57. })
  58.  


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23505.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询