欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《二十五》map地图API

发布：2018-01-25 16:22浏览： 次来源：网络 作者：tianshu

接口说明:
  • 本节主要介绍微信小程序API中获取位置和打开位置这两个接口的使用方法，以及获取位置接口在map标签上的应用。


接口用法：

小程序极速实战开发《二十五》map地图API(图1)

 


注： 上图所演示的是页面加载完成后用map标签显示用户当前位置，当点击按钮时跳转至微信地图显示用户当前位置。


wxml
  1. <view>
  2.     <button type="primary" bindtap="showLocation">获取当前地理位置并在地图中打开</button>
  3. </view>
  4. <map longitude="{{location.longitude}}" latitude="{{location.latitude}}" markers="{{markers}}" covers="{{covers}}"></map>


js
  1. Page({
  2.   data:{},
  3.   onLoad:function(options){
  4.     var _this = this;
  5.     wx.getLocation({
  6.       type: 'wgs84',
  7.       success: function(res){
  8.         var longitude = res.longitude, latitude = res.latitude;
  9.         _this.setData({
  10.           location: {
  11.             latitude: latitude,
  12.             longitude: longitude,
  13.           },
  14.           markers:[{
  15.             latitude: latitude,
  16.             longitude: longitude,
  17.             name: '微信小程序社区',
  18.             desc: '我在这里'
  19.           }],
  20.           covers: [{
  21.             latitude: latitude,
  22.             longitude: longitude,
  23.             iconPath: '../images/car.png',
  24.             rotate: 10
  25.           }]
  26.         });
  27.       }
  28.     })
  29.   },
  30.   showLocation: function(e) {
  31.     var _this = this;
  32.     var location = _this.data.location;
  33.     wx.openLocation({
  34.       latitude: location.latitude,      // 纬度，范围为-90~90，负数表示南纬
  35.       longitude: location.longitude,    // 经度，范围为-180~180，负数表示西经
  36.       scale: 28,               // 缩放比例
  37.       name: '微信小程序社区',   // 位置名
  38.       address: '我还是在这里'       // 地址的详细说明
  39.     });
  40.   }
  41. })


注： 由于map标签所有属性的值不支持动态变化，只能在页面加载完成时设置。所以本示例中为了达到将用户位置设置到map标签的效果，在onload函数中就直接调用了wx.getLocation并将位置信息绑定到了变量中。

 

wxss
  1. button {
  2.     width: 700rpx;
  3.     margin: 200rpx auto 0 auto;
  4. }
  5. map {
  6.     width: 700rpx;
  7.     height: 600rpx;
  8.     margin: 30rpx auto;
  9. }


主要方法：wx.getLocation(OBJECT)

OBJECT参数说明


参数名称
数据类型
必填
说明
type String 否 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success Function 是 接口调用成功的回调函数，返回内容详见返回参数说明。
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
success返回参数说明：[td]
参数名称
数据类型
说明
latitude Number 纬度，浮点数，范围为-90~90，负数表示南纬
longitude Number 经度，浮点数，范围为-180~180，负数表示西经
errMsg String 接口返回的message，成功为getLocation小程序极速实战开发《二十五》map地图API(图2)k

wx.openLocation(OBJECT)

OBJECT参数说明


参数名称
数据类型
必填
说明
latitude Float 是 纬度，范围为-90~90，负数表示南纬
longitude Float 是 经度，范围为-180~180，负数表示西经
scale INT 否 缩放比例，范围1~28，默认为28
name String 否 位置名（可自行定义）
address String 否 地址的详细说明（可自行定义）
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有