位置

<map>

• 渲染地图
• 以属性的形式设置各种地图插件
• 默认大小 300*150

<map id="myMap" show-location />

wx.createMapContext(string mapId, Object this)

• 深入控制地图：根据地图组件 map 的 mapId 创建其上下文 MapContext 对象，与地图交互
• 不需要显示的使用 #

Page({
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')
  }
})

wx.getLocation(Object object)

• 分类：位置接口
• 只针对部分限定类目的小程序开放
• 获取当前的地理位置、速度
• 需要在 app.json 中声明使用到的 API；详情请查看 具体规则公告

"requiredPrivateInfos": [
    "getLocation"
]

• 默认 type 是 GPS，推荐使用 gcj02

"getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json"

• 需要开通权限：[开发] → [开发管理] → [接口设置]中自助开通
• 提示：增加调用频率限制

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() 结合使用，先获取位置信息，然后使用这些信息打开地图
• 会提供返回中心点、导航、打车、收藏等信息
• 需要在 app.json 中配置权限

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

[] 打开桂林市体育中心；坐标可以事先查阅好

wx.openLocation({
    latitude: 25.26,
    longitude: 110.32,
    name: '桂林市体育中心',
    address: '七星区穿山东路12号'
})

wx.chooseLocation(Object object)

• 分类：位置接口
• 打开地图选择位置

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

wx.choosePoi(Object object)

• 分类：位置接口
• 打开 POI 列表选择位置

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

wx.chooseAddress(Object object)

• 分类：开放接口
• 获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址

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

• 配置 app.json - 只需配置一次，全局生效
• 根据需要的具体业务指定

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

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

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

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

<map
    class="map" 
    id="map"
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    markers="{{markers}}
    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 中初始化，可以避免使用 this
• 在 data 中声明经纬度变量、标记点；标记用来显示地图中心
• 在 onLoad 中同时获取位置信息

let mapCtx;

Page({
  data: {
    longitude: "",
    latitude: ""
    markers: []
  },

  onLoad(options) {
    mapCtx = wx.createMapContext('myMap')
    wx.getLocation({
      type: 'gcj02',
      success: res => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        })
      },
      fail: err => console.log('getLocation fail', err)
    })
  }
})

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

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: 'center',
            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
• 百度地图开放平台