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

微信小程序提供的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
      })
    }
  })
}

除了显示基本地图，还可以在地图上添加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
    }],
    ... //省略代码
    }

polyline

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

// .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

在地图上显示圆

// .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

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

position

// .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是显示不出来的）

绑定事件

BUG

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

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

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

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

.

原文地址：https://www.cnblogs.com/jianxian/p/11108223.html