获得当前地理地方和经纬度实例代码,微信小程序之得到当前地方经纬度以及地图呈现详解

微信小程序实例-获取当前的地理位置、经纬度

微信小程序 wxapp地图 map:

最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括–获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度。

微信小程序官方文档

map

微信小程序的主体部分包括:

属性名 类型 默认值 说明
longitude Number   中心经度
latitude Number   中心纬度
scale Number 1 缩放级别
markers Array   标记点
covers Array   覆盖物

图片 1

JS代码

标记点

新增页面需要在app.json进行配置:

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: '示例小程序-获取当前地理位、速度',
  userInfo: {},
  hasLocation:false,
  location:{}
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  }),
   wx.getLocation( {
   success: function( res ) {
    console.log( res )
    that.setData( {
     hasLocation: true,
     location: {
      longitude: res.longitude,
      latitude: res.latitude
     }
    })
   }
  })
 }
})

标记点用于在地图上显示标记的位置,不能自定义图标和样式

 "pages":[
  "pages/index/index",
  "pages/location/location",
  "pages/logs/logs"
 ]

index.wxml

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
name 标注点名 String  
desc 标注点详细描述 String  

通过在视图层调用bindtap与逻辑层中的方法匹配–实现页面跳转:

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="usermotto">
  <!-- <text class="user-motto">{{motto}}\n</text>-->
  <text>经度:{{location.longitude}}\n</text>
  <text>纬度:{{location.latitude}}</text>
 </view>
</view>

覆盖物

视图层

运行效果

覆盖物用于在地图上显示自定义图标,可自定义图标和样式

 <view class="location" bindtap="locationViewTap">
  <button>获取用户当前位置</button>
 </view>

图片 2

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
iconPath 显示的图标 String 项目目录下的图片路径,支持相对路径写法
rotate 旋转角度 Number 顺时针旋转的角度,范围 0 ~ 360,默认为 0

逻辑层

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

 locationViewTap: function(){
  wx.navigateTo({
   url: '../location/location'
  })
 }

您可能感兴趣的文章:

  • 微信小程序之获取当前位置经纬度以及地图显示详解
  • 微信小程序
    地图定位简单实例
  • 微信小程序
    地图(map)实例详解
  • 微信小程序
    高德地图SDK详解及简单实例(源码下载)
  • 微信小程序
    地图map详解及简单实例
  • 微信小程序
    使用腾讯地图SDK详解及实现步骤
  • 微信小程序 wxapp地图
    map详解
  • 微信小程序开发之map地图实现教程
  • 微信小程序
    地图map实例详解
  • 微信小程序实现获取自己所处位置的经纬度坐标功能示例

标记点markers只能在初始化的时候设置,不支持动态更新。

通过在视图层调用bindtap与逻辑层中的方法匹配–实现方法调用:

示例:

视图层

<!-- map.wxml -->
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
// map.js
Page({
 data: {
  markers: [{
   latitude: 23.099994,
   longitude: 113.324520,
   name: 'T.I.T 创意园',
   desc: '我现在的位置'
  }],
  covers: [{
   latitude: 23.099794,
   longitude: 113.324520,
   icaonPath: '../images/car.png',
   rotate: 10
  }, {
   latitude: 23.099298,
   longitude: 113.324129,
   iconPath: '../images/car.png',
   rotate: 90
  }]
 }
})
  <button bindtap="mapViewTap" style="margin:10px">查看地图</button>
  <button bindtap="chooseMapViewTap" style="margin:10px">选择位置</button>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

逻辑层

您可能感兴趣的文章:

  • 微信小程序之获取当前位置经纬度以及地图显示详解
  • 微信小程序
    获取当前地理位置和经纬度实例代码
  • 微信小程序
    地图定位简单实例
  • 微信小程序
    地图(map)实例详解
  • 微信小程序
    高德地图SDK详解及简单实例(源码下载)
  • 微信小程序
    地图map详解及简单实例
  • 微信小程序
    使用腾讯地图SDK详解及实现步骤
  • 微信小程序开发之map地图实现教程
  • 微信小程序
    地图map实例详解
  • 微信小程序实现获取自己所处位置的经纬度坐标功能示例
 mapViewTap:function(){
    wx.getLocation({
     type: 'gcj02', //返回可以用于wx.openLocation的经纬度
     success: function(res) {
      console.log(res)
      wx.openLocation({
       latitude: res.latitude,
       longitude: res.longitude,
       scale: 28
      })
    }
   })
 }

有关地图位置的三个接口:

(1) wx.getLocation(OBJECT) 获取当前的地理位置、速度

success返回参数:

latitude 纬度,浮点数,范围为-90~90,负数表示南纬
longitude 经度,浮点数,范围为-180~180,负数表示西经
speed 速度,浮点数,单位m/s
accuracy 位置的精确度

   

(2) wx.openLocation(OBJECT)  使用微信内置地图查看位置

OBJECT参数说明:

参数 类型 必填 说明
latitude Float 纬度,范围为-90~90,负数表示南纬
longitude Float 经度,范围为-180~180,负数表示西经
scale INT 缩放比例,范围5~18,默认为18
name String 位置名
address String 地址的详细说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

(3) wx.chooseLocation(OBJECT) 打开地图选择位置

success返回参数:

name 位置名称
address 详细地址
latitude 纬度,浮点数,范围为-90~90,负数表示南纬
longitude 经度,浮点数,范围为-180~180,负数表示西经

实现效果

 利用getLocation获取当前位置的经纬度坐标,openLocation打开微信内置地图查看

图片 3 

图片 4    

利用chooseLocation选取位置,并将位置信息的经纬度实时响应显示

图片 5 

图片 6

注意事项:

(1) 利用getLocation()获得的地图参数信息只有两个

    图片 7  

利用chooselocation返回的参数如下:

         
图片 8

(2) this.setData修改json里面的值

逻辑层中的json数据可以通过WXML文件{{json}}显示出来:

    图片 9

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 微信小程序
    地图定位简单实例
  • 微信小程序
    地图(map)实例详解
  • 微信小程序
    高德地图SDK详解及简单实例(源码下载)
  • 微信小程序
    地图map详解及简单实例
  • 微信小程序
    使用腾讯地图SDK详解及实现步骤
  • 微信小程序开发之map地图实现教程
  • 微信小程序
    开发MAP(地图)实例详解
  • 微信小程序
    地图map实例详解
  • 微信小程序实现打开内置地图功能【附源码下载】