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

Posted 2022-02-26 jianxian

 微信小程序提供的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	点击地图时触发

BUG

关于经纬度，官方文档上都写的是Number类型。但是通过IDE调试的时候，写成字符串也是可以的。但是在ios真机上运行时，markers却显示不出来，也不报错。

后来自己对照属性的类型，发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。

所以将字符串转成Number类型即可。

附原始手册地址：http://blog.csdn.net/crazy1235/article/details/55004841

 

 

 

 

 

.