位置

@Location

调试的时候，应结合预览和真机调试共同使用

<map>

渲染地图

常用属性
属性	说明
longitude	经度；必填
latitude	纬度；必填
show-location	显示带有方向的当前定位点
show-scale	显示缩放标尺
show-compass	显示罗盘
markers	在地图上显示标记的位置；结合地图服务API - 地点搜索实现 latitude：标记经度；必填 longitude：标记维度；必填 iconPath：标记图片路径；必填 id：标记id；number；注意是数字类型；每个标记的id应该不同；必填 width：标记宽度；实际开发必填 height：标记高度；实际开发必填 label：标签；在标记下方显示信息；对象类型 callout：单击标记，在上方显示content信息，单击地图其它地方，信息消失；对象类型
bindtap	单击地图，获取单击点经纬度信息
bindmarkertap	单击地图标记，获取标记点id
bindcallouttap	单击标记的气泡触发
bindlabeltap	单击标记的标签触发

[渲染层错误] [Component] <map>:width and heigth of marker id 1 are required

气泡callout vs 标签label
属性	callout	label
display	√：BYCLICK、ALWAYS、NEVER	×
content	√	√
color	√	√
fontSize	√	√
anchorX	√：marker 对应的经纬度	√
anchorY	√：marker 对应的经纬度	√
borderWidth	√	√
borderColor	√	√
borderRadius	√	√
bgColor	√	√
padding	√	√
textAlign	√：left, right, center	√

wx.getLocation(Object object)

分类：位置接口

获取当前的地理位置、速度

需要在 app.json 中进行声明；详情请查看具体规则公告、官方文档 - getLocation

默认 type 是 GPS，推荐使用 gcj02

只针对部分限定类目的小程序开放

需要开通权限：[开发] → [开发管理] → [接口设置]中自助开通

提示：增加调用频率限制

wx.getLocation({
    type: 'gcj02',
    success: res => {
        console.log('getLocation ok', res);
    },
    fail: err => console.log('getLocation fail', err)
})

wx.openLocation(Object object)

分类：位置接口

使用微信内置地图查看位置，并将指定的地点居中显示；通常用于在用户需要查看某个特定位置的详细地图和周边情况

如果不提供 latitude 和 longitude，地图将以用户当前位置为中心

wx.openLocation() 通常与 wx.getLocation() 或 wx.chooseLocation() 结合使用，先获取位置信息，然后使用这些信息打开地图

更多信息，请访问官方文档 - openLocation

wx.chooseLocation(Object object)

分类：位置接口

打开地图选择位置

更多信息，请访问官方文档 - chooseLocation

chooseLoc() {
    wx.chooseLocation({
        success: res => {
        console.log('chooseLocation ok', res);
        },
        fail: err => console.log('chooseLocation fail', err)
    })
}

wx.choosePoi(Object object)

分类：位置接口

打开POI列表选择位置

更多信息，请访问官方文档 - choosePoi

choosePoi() {
    wx.choosePoi({
        success: res => {
        console.log('choose poi ok', res);
        },
        fail: err => console.log('choose poi fail', err)
    })
}

choosePoi:fail 开发者工具暂时不支持此 API 调试，请使用真机进行开发

wx.chooseAddress(Object object)

分类：开放接口

获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址

更多信息，请访问官方文档 - chooseAddress

chooseAddr() {
    wx.chooseAddress({
        success: res => console.log('chooseAddress ok', res),
        fail: err => console.log('chooseAddress fail', err)
    })
}

wx.createMapContext(string mapId, Object this)

深入控制地图：根据地图组件 map 的 mapId 创建其上下文 MapContext 对象，与地图交互

MapContext 通过 id 跟一个 map 组件绑定，操作对应的 map 组件；常用方法有：

moveToLocation(Object object)

将地图中心移置当前定位点；地图组件需设置 show-location 为true

经纬度非必须

addMarkers(Object object)

在地图上添加标记

getCenterLocation(Object object)

获取当前地图中心的经纬度；返回 gcj02 坐标系，可以用于 wx.openLocation()

更多信息，请访问官方文档 - MapContext

map基本使用

配置app.json - 只需配置一次，全局生效

根据需要的具体业务指定

"requiredPrivateInfos":[
    "getLocation",
    "chooseLocation",
    "choosePoi",
    "chooseAddress"
]

非必须 - 具体视版本而定；系统通过弹窗提示是否授权

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}

页面.wxml - 使用位置信息渲染地图组件<map>；使用固定定位的图片元素返回地图中心

<map
    class="map" 
    id="map"
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    show-location 
    show-scale 
    show-compass 
    bindtap='getMapInfo' 
    bindmarkertap="getMarker" 
    bindlabeltap="getLabel" 
    bindcallouttap="getCallout"
    bindregionchange="changeRegion"/>
<image class="img" src="../../utils/center.png" mode="aspectFill" bind:tap="moveToLocation" />

页面.wxss - 设置样式宽高同屏幕

map{
    width: 100vw;
    height: 100vh;
}

.img {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
}

在 Page 外部声明全局地图上下文变量 mapCtx，在页面 onLoad 中初始化

mapCtx = wx.createMapContext('map')

在 data 中声明经纬度变量、标记点，用作视图绑定

data: {
    longitude: '',
    latitude: '',
    markers: []
}

在 onLoad 中同时获取位置信息

wx.getLocation({
    type: 'gcj02',
    success: res => {
        console.log(res);
        this.setData({
            latitude: res.latitude,
            longitude: res.longitude
        })
    }
})

添加标记点函数，使用经纬度作为形参

addCenterMarkers(lati, long) {
    let markers = this.data.markers
    let ind = markers.length
    let marker = {
        id: ind,
        latitude: lati,
        longitude: long,
        iconPath: '../../utils/marker.png',
        width: 32,
        height: 32,
        callout: {
            content: 'top',
            color: '#ff4400',
            textAlign: 'cneter',
            display: 'BYCLICK'
        },
        label: {
            content: 'center',
            color: '#ff4400',
            textAlign: 'cneter'
        }
    }
    markers.push(marker)
    this.setData({
        markers
    })
}

单击返回中心，使地图回到中心点

moveToLocation() {
    mapCtx.moveToLocation({
        longitude: this.data.longitude,
        latitude: this.data.latitude
    })
}

移动地图 - 略

changeRegion(e) {
console.log('moving', e);
}

其它事件 - 借助UI API；略

getMapInfo(e) {
    console.log(e);
    wx.showToast({
        title: 'map tapped',
    })
    // 每次单击地图时，增加一个 markers
    this.addCenterMarkers(e.detail.latitude, e.detail.longitude)
},

getMarker(e) {
    console.log('marker tap', e);
    wx.showToast({
        title: 'marker tapped',
    })
},

getLabel(e) {
    console.log('label tap', e);
    wx.showToast({
        title: 'label tapped',
    })
},

getCallout(e) {
    console.log('callout tap', e);
    wx.showToast({
        title: 'callout tapped',
    })
}

开发工具的模拟器和预览、真机调试有差别

第三方平台

腾讯位置服务 LBS

百度地图开放平台