概要

腾讯地图WebService API是基于HTTPS/HTTP协议的数据接口，在微信小程序中可通过wx.request进行调用，
同时还可以结合小程序map组件实现数据叠加展示、交互等应用需求。

第1步：注册开发者

注册位置服务开发者，并创建服务调用key（key是调用API的身份标识，作为必填参数之一传递给API接口）
点此进入 应用管理 创建或管理key，若未注册或登录可按提示进行，详情可参考WebServcieAPI入门指南。

第2步：服务器域名配置

在正式请求前，您需要在微信小程序中进行域名配置。

进入微信小程序首页。在【开发管理】界面，选择【开发设置】

下滑页面，在【服务器域名】中点击修改按钮

修改【request合法域名】为腾讯地图服务api域名，点击【保存并提交】即可。

第3步：开发

微信小程序中调用 WebService API 接口，需通过微信小程序提供的 wx.request 进行接口请求，如下

wx.request({
  url: '接口url',  //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

详情可参考微信小程序开发文档。

实例1：地点搜索

本实例通过调用腾讯地点搜索API，搜索北京市内的美食（餐馆）地点，并结合小程序map组件显示到地图中。
关于地点搜索API的全部功能及使用方法，可参见：地点搜索API文档
微信小程序map组件可参见：微信小程序map组件开发文档
本示例实现效果：

index.js设置

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    latitude: 39.909088,
    longitude: 116.397643
  },
  
  buttonSearch(e){
    var _this = this
    var allMarkers = []
    //通过wx.request发起HTTPS接口请求
    wx.request({
      //地图WebserviceAPI地点搜索接口请求路径及参数（具体使用方法请参考开发文档）
      url: 'https://apis.map.qq.com/ws/place/v1/search?page_index=1&page_size=20&boundary=region(北京市,0)&keyword=美食&key=您的key',
      success(res){
        var result = res.data
        var pois = result.data
        for(var i = 0; i< pois.length; i++){
          var title = pois[i].title
          var lat = pois[i].location.lat
          var lng = pois[i].location.lng
          console.log(title+","+lat+","+lng)
          const marker = {
            id: i,
            latitude: lat,
            longitude: lng,
            callout: {
              // 点击marker展示title
              content: title
            }
          }
          allMarkers.push(marker)
          marker = null
        }
        
        _this.setData({
          latitude: allMarkers[0].latitude,
          longitude: allMarkers[0].longitude,
          markers: allMarkers
        })
      }
    })
  }
})

index.wxml设置

<!--index.wxml-->
<view class="container">
  <map id="map"
    class="map"
    markers="{{markers}}"
    longitude="{{longitude}}" latitude="{{latitude}}">
  </map>
</view>

<button size="mini" bindtap="buttonSearch">检索“美食”</button>

实例2：驾车路线规划

本实例通过调用腾讯驾车路线规划API，实现指定起、终点的路线计算，并结合小程序map组件中的polyline进行呈现。
驾车路线规划API的全部功能及使用方法，可参见：驾车路线规划API文档
微信小程序map组件可参见：微信小程序map组件开发文档
本示例实现效果：

index.js 设置

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    latitude: 39.909088,
    longitude: 116.397643
  },
  
  buttonDriving(e){
    var _this = this
    //通过wx.request发起HTTPS接口请求
    wx.request({
      //地图WebserviceAPI驾车路线规划接口 请求路径及参数（具体使用方法请参考开发文档）
      url: 'https://apis.map.qq.com/ws/direction/v1/driving/?key=您的key&from=39.894772,116.321668&to=39.902781,116.427171',
      success(res){
        var result = res.data.result
        var route = result.routes[0]
        
        var coors = route.polyline, pl = [];
          //坐标解压（返回的点串坐标，通过前向差分进行压缩）
          var kr = 1000000;
          for (var i = 2; i < coors.length; i++) {
            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
          }
          //将解压后的坐标放入点串数组pl中
          for (var i = 0; i < coors.length; i += 2) {
            pl.push({ latitude: coors[i], longitude: coors[i + 1] })
          }
          _this.setData({
            // 将路线的起点设置为地图中心点
            latitude:pl[0].latitude,
            longitude:pl[0].longitude,
            // 绘制路线
            polyline: [{
              points: pl,
              color: '#58c16c',
              width: 6,
              borderColor: '#2f693c',
              borderWidth: 1
            }]
          })
      }
    })
  }
})

index.wxml 设置

<!--index.wxml-->
<view class="container">
  <map id="map"
    class="map"
    polyline="{{polyline}}"
    longitude="{{longitude}}" latitude="{{latitude}}">
  </map>
</view>

<button size="mini" bindtap="buttonDriving">算路请求</button>