微信小程序~获取位置信息

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

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

微信小程序提供的getlocation来获取用户的定位，能够得到用户的经纬度信息

（注：getloaction需要用户授权scope.userLocation）结合map组件能够得到用户的详细定位

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location style="width: 100%; height: 400rpx;"></map>

onReady:function(){
  wx.getLocation({
    type: 'wgs84',//默认wgs84是全球定位系统获取的坐标，gcj02是国家测绘局给出的坐标
    success: (res) => {
      console.log('经度' + res.longitude + '，纬度' + res.latitude);
      this.setData({
        latitude: res.latitude,
        longitude: res.longitude
      })
    }
  })
}

参数名	参数类型	描述
longitude	Number	中心经度
latitude	Number	中心纬度
scale	Number	缩放级别，取值范围 5-18（默认16 number）
markers	Array	标记点
polyline	Array	路线
circle	Array	圆
controls	Array	控件
include-points	Array	缩放视野以及所有给定的坐标点
circle	Boolean	圆
show-location	EventHandle	显示带有方向的当前定位点
bindmarkertap	EventHandle	点击标记点时触发
bindcontroltap	EventHandle	点击控件时触发
bindregionchange	EventHandle	视野发生变化时触发
bindtap	EventHandle	点击地图时触发

除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。

markers

data: {
    markers: [{
      iconPath: "../../img/marker_red.png",
      id: 0,
      latitude: 40.002607,
      longitude: 116.487847,
      callout:{
        content:'气泡名称',
        color: '#FF0000',
        fontSize: 15,
        borderRadius: 10,
        display: 'ALWAYS',
      },
      width: 35,
      height: 45
    }],
    ... //省略代码
    }

参数名	参数类型	必传	描述
id	Number	N	标记点id（marker事件回调会返回此id）
longitude	Number	Y	中心经度（浮点数，范围：-180~180）
latitude	Number	Y	中心纬度（浮点数，范围：-90~90）
title	String	N	标注点名
iconPath	String	Y	显示的图标（项目目录下的图片路径，支持相对路径写法，以‘/’开头，则表示相对小程序的根目录，也支持临时路径）
rotate	Number	N	旋转角度（顺时针旋转的角度，范围：0~360，默认0）
alpha	Number	N	标注的透明度（默认1，无透明）
width	Number	N	标注图标宽度（默认图标实际宽度）
height	Number	N	标注图标高度（默认图标实际高度）
callout	Object	N	自定义标注点上方的气泡窗口 ({content，color，fontSize，borderRadius，bgColor，padding，boxShadow，display})
label	Object	N	为标记点旁边增加标签（{color，font Size，content，x，y}，可识别换行符，x，y原点是marker对应的经纬度）

polyline

指定一系列坐标点，从数组第一项连线至最后一项

参数名	参数类型	必传	描述
points	Array	Y	经纬度数组（[{latitude：0，longitude:0}]）
color	String	N	线的颜色（8位16进制表示，后两位表示alpha值，如：#000000AA）
width	Number	N	线的宽度
dotted'Line	Boolean	N	是否是虚线（默认false）

// .wxml
<map id="myMap" style='width:100%;height:50%' longitude="{{longitude}}" latitude="{{latitude}}" polyline='{{polyline}}'/>
// .js 
Page({
    data: {
        polyline:[{
            points:[{
                latitude:'40.006822',
                longitude:'116.481451'
             }, {
                longitude: '116.487847',
                latitude: '40.002607'
             }, {
                longitude: '116.496507',
                latitude: '40.006103'
             }, {
                latitude:'40.002607',
                longitude: '116.587847',
            }],
            width:2,
            color:'#000000AA',
            dottedLine:false
        }]
    }
})

circles

在地图上显示圆

参数名	参数类型	必传	描述
longitude	Number	Y	中心经度（浮点数，范围：-180~180）
latitude	Number	Y	中心纬度（浮点数，范围：-90~90）
color	String	N	描边颜色（8位16进制表示，后两位表示alpha值，如：#000000AA）
fill'Color	String	N	填充颜色（8位16进制表示，后两位表示alpha值，如：#000000AA）
strokeWidth	Number	N	描边宽度
radius	Number	Y	半径

// .wxml
<map id="myMap" style='width:100%;height:50%' longitude="{{longitude}}" latitude="{{latitude}}" circles='{{circles}}'/>
// .js 
Page({
    data: {
        circles:[{
            latitude:40.002607,
            longitude: 116.587847,
            color: '#ee7788aa',
            radius: 50,
            fillColor:'#7cb5ec88',
            strokeWidth:1
        }]
    }
})

controls

在地图上显示控件，控件不随地图移动

参数名	参数类型	必传	描述
id	Number	N	控件id（在控件点击事件回调返回此id）
position	Object	Y	控件在地图的位置（控件相对地图位置）
icon'Path	String	Y	显示的图标（项目路径下的路径，支持相对路径写法，以‘/’开头表示相对小程序的根目录）
clickable	Boolean	N	是否可点击（默认不可点击）

position

参数名	参数类型	必传	描述
left	Number	N	距离地图左边界的距离（默认为0）
top	Number	N	距离地图上边界的距离（默认为0）
width	Number	N	控件宽度（默认图片宽度）
height	Number	N	控件高度（默认图片高度）

// .wxml
<map id="myMap" style='width:100%;height:400px' longitude="{{longitude}}" latitude="{{latitude}}" controls='{{controls}}' bindcontroltap='controltap'/>
// .js 
Page({
    data: {
        controls: [{
            id: 1,
            iconPath: '../../img/marker_yellow.png',
            position: {
                left: 10,
                top: 360,
                width: 35,
                height: 35
            },
            clickable: true
        }]
    }
}),
controltap: function (e) {
    console.log(e.controlId); # 控件id 1
}
#可以通过在map上添加一个按钮，来实现诸如：定位、状态返回等操作。 
#（直接通过布局文件在map上添加view是显示不出来的）

绑定事件

参数名	参数类型	描述
bindmarkertap	EventHandel	点击标记点时触发
bindcontroltap	EventHandel	点击控件时触发
bindregionchange	EventHandel	视野发生变化时触发
bindtap	EventHandel	点击地图时触发