Tencent Map WeChat Mini Program JavaScript SDK

https://lbs.qq.com/miniProgram/jsSdk
Admin
Tencent Map WeChat Mini Program JavaScript SDK provides location-based services including place...
Tokens:32,979
Snippets:151
Trust Score:9.5
Update:5 months ago
Show doc for...
Tokens:
Raw
### SDK Initialization and Usage Example

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx

A practical example demonstrating how to import, instantiate, and use the QQMapWX SDK within a WeChat Mini Program.

```APIDOC
## Example

```javascript
// Import the SDK core class
var QQMapWX = require('xxx/qqmap-wx.js');

// Instantiate the API core class
var demo = new QQMapWX({
    key: 'Your Developer Key' // Required
});

// Call an interface, for example, search
demo.search({
    keyword: 'hotel',
    success: function(res) {
        console.log(res.status, res.message);
        // Process search results here
    },
    fail: function(res) {
        console.log(res.status, res.message);
        // Handle errors here
    },
    complete: function(res) {
        console.log(res.status, res.message);
        // Code to run after the call completes
    }
});
```
```

--------------------------------

### JavaScript Implementation for Get Suggestion

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGetsuggestion

This JavaScript code demonstrates how to initialize the QQMapWX SDK, handle input events to trigger the getSuggestion method, process the results, and update the UI. It includes success, fail, and complete callbacks for the API call.

```javascript
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});
 
//在Page({})中使用下列代码
Page({
  data: {
    keyword: '',
    showSuggestion: false,
    suggestion:[] // 声明suggestion，用于存储提示结果
  },
  //数据回填方法
  backfill: function (e) {
    var id = e.currentTarget.id;
    for (var i = 0; i < this.data.suggestion.length;i++){
      if(i == id){
        this.setData({
          keyword: this.data.suggestion[i].title
        });
      }  
    }
  },
  onSelect: function () {
     this.setData({
         showSuggestion: false,
     })
  },
  //触发关键词输入提示事件
  getsuggest: function(e) {
    var _this = this;
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
      success: function(res) {//搜索成功后的回调
        console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug,
          showSuggestion: true,
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    });
  }
})

```

--------------------------------

### Cross-city Transit Route Planning

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection

This example demonstrates a cross-city transit route. For intra-city routes, a secondary query using `TRANSIT_FOLDER` is required.

```json
{
    "status":0,                                                         //状态码，正常为0
    "message":"query ok",                                               //状态说明
    "result":                                                           //搜索结果
    {
        "routes":[
            {
                "distance": 1337851,                                    //方案整体距离（米）
                "duration":288,                                         //方案估算时间（分钟）
                "bounds": "31.194238,116.378922,39.871814,121.320876",  //路线bounds，用于显示地图时使用
                "steps": [
                    {
                        "mode": "TRANSIT_FOLDER",                       //TRANSIT_FOLDER跨城公交，起点、途经、终点、市内部分，不会给出具体方案，需要通过此节点属性，进行二次查询得到；
                        "distance": 4,                                  //阶段路线距离
                        "direction": "北",                              //阶段路线方向
                        "origin":{
                            "location":{
                                lat:"39.864989",                        //纬度
                                lng:"116.379009"                        //经度
                            }
                        },
                        "destination":{
                            "location":{
                                lat:"39.865021",                        //纬度
                                lng:"116.379019"                        //经度
                            }
                        }
                    },
                    {
                        "mode": "TRANSIT",
                        "lines": [
                            {
                                "vehicle": "RAIL",                      //交通工具：铁路（RAIL）
                                "id": "13995286317411406868",
                                "station_count": 2,                     //经过站数
                                "destination":{
                                    "id":"13136947784159182883",
                                    "title":"上海虹桥"
                                },
                                "distance": 1318000,                    //距离
                                "duration": 288,                        //估算时间
                                "polyline": [39.865021, 116.379019, 58, -97, 1676, 3233, 5059, 37384, -1061, ... ...], //阶段路线坐标点串(该点串经过压缩，解压请参考：polyline 坐标解压)
                                "geton": {
                                    "id": "17252417566629421518",
                                    "title": "北京南",                   //上车站名
                                    "location": {
                                        "lat": 39.865021,               //纬度
                                        "lng": 116.379019               //经度
                                    }
                                },
                                "getoff": {
                                    "id": "13136947784159182883",
                                    "title": "上海虹桥",                 //下车站名
                                    "location": {
                                        "lat": 31.194238,               //纬度
                                        "lng": 121.320876               //经度
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
}
```

--------------------------------

### Transit Route Response Example

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection

This JSON structure represents a successful response for a transit route query. It includes overall route information and detailed steps for each segment of the journey, specifying modes of transport, station details, and timing.

```json
{
    "status":0,
    "message":"query ok",
    "result":
    {
        "routes":[
            {
                "distance": 20123,
                "duration": 75,
                "duration_1m":75,
                "bounds": "40.014309000000004,116.285706,40.15301,116.318099",
                "steps": [
                    {
                        "mode": "WALKING",
                        "tag": "INTERNAL",
                        "distance": 760,
                        "duration": 11,
                        "direction": "东",
                        "polyline": [40.014634, 116.312869, -135, 160, -90, 100, -40, 80,... ...],
                        "steps":
                        [{
                            "instruction": "步行454米,左转进入中关村北大街",
                            "polyline_idx": [0, 31],
                            "road_name": "",
                            "dir_desc": "东南",
                            "distance": 454,
                            "act_desc": "左转"
                        },
                        {
                            ...
                        }]
                    },
                    {
                        "mode": "TRANSIT",
                        "lines": [
                            {
                                "vehicle": "BUS",
                                "id": "7225403257131337003",
                                "title": "717",
                                "station_count": 7,
                                "price": 2,
                                "destination":{
                                    "id":"5047847604295657152",
                                    "title":"地铁西二旗站"
                                },
                                "start_time":"05:30",
                                "end_time":"22:00",
                                "distance": 4560,
                                "duration": 26,
                                "polyline": [40.016124, 116.317759, 423, -241, 321, -214, 410, -323, 378, ... ...],
                                "geton": {
                                    "id": "10640224892745223512",
                                    "title": "圆明园东门",
                                    "location": {
                                        "lat": 40.016124,
                                        "lng": 116.317759
                                    }
                                },
                                "getoff": {
                                    "id": "5047847604295657152",
                                    "title": "地铁西二旗站",
                                    "location": {
                                        "lat": 40.053226,
                                        "lng": 116.304718
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
}
```

--------------------------------

### JavaScript for QQ Maps SDK Distance Calculation

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodCalculatedistance

This JavaScript code demonstrates how to initialize the QQ Maps SDK, handle form submissions to get coordinates, and use the calculateDistance method. It processes the results to display distances and includes basic error handling.

```javascript
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});
 
//在Page({})中使用下列代码
Page({
  data: {
    distance: [],
  },
  //事件触发，调用接口
  formSubmit(e){
    var _this = this;
    //调用距离计算接口
    qqmapsdk.calculateDistance({
        //mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
        //from参数不填默认当前地址
        //获取表单提交的经纬度并设置from和to参数（示例为string格式）
        from: e.detail.value.start || '', //若起点有数据则采用起点坐标，若为空默认当前地址
        to: e.detail.value.dest, //终点坐标
        success: function(res) {//成功后的回调
          console.log(res);
          var res = res.result;
          var dis = [];
          for (var i = 0; i < res.elements.length; i++) {
            dis.push(res.elements[i].distance); //将返回数据存入dis数组，
          }
          _this.setData({ //设置并更新distance数据
            distance: dis
          });
        },
        fail: function(error) {
          console.error(error);
        },
        complete: function(res) {
          console.log(res);
        }
    });
  }
})
```

--------------------------------

### Get District by City ID using WeChat Mini Program JS SDK

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGetdistrictbycityid

This snippet demonstrates how to initialize the QQMapWX SDK and then use the getDistrictByCityId method to fetch district data for a city. It includes success, fail, and complete callbacks for handling the API response. Ensure you have obtained the city ID from a previous call to getCityList.

```javascript
var QQMapWX = require('xxx/qqmap-wx.js');

var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' 
});

Page({
  onShow: function() {
    var _this = this;
    qqmapsdk.getCityList({
      success: function(res) {
        console.log(res);
        console.log('省份数据：', res.result[0])
        var city = res.result[0];
        qqmapsdk.getDistrictByCityId({
          id: city[0].id,
          success: function(res) {
            console.log(res);
            console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
          },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            console.log(res);
          }
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    });
  }
})
```

--------------------------------

### WXML Template for Distance Calculation

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodCalculatedistance

This WXML template includes a form for users to input start and destination coordinates and a view to display the calculated walking distances. It requires a map component and binding for markers, though not explicitly shown in this snippet.

```xml
<form bindsubmit="formSubmit">
    <!--输入起点和终点经纬度坐标，格式为string格式-->
    <label>
    起点坐标:
    <input style="border:1px solid #000;" name="start"></input>
    </label>
    <!--多个终点位置示例：39.984060,116.307520;39.984060,116.507520-->
    <label>
    终点坐标:
    <input style="border:1px solid #000;" name="dest"></input>
    </label>
    <!--提交表单数据-->
    <button form-type="submit">计算距离</button>
</form>
<!--渲染起点经纬度到终点经纬度距离，单位为米-->
<view wx:for="{{distance}}" wx:key="index">
    <view>起点到终点{{index+1}}的步行距离为{{item}}米</view>
</view>
```

--------------------------------

### Get City List using WeChat Mini Program JavaScript SDK

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGetcitylist

Use this method to retrieve a list of all cities in China. The data is returned in a hierarchical structure representing provinces, cities, and districts. Ensure the SDK is correctly imported and initialized before calling this method.

```javascript
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});

//在Page({})中使用下列代码
//页面显示/切入前台时触发
onShow: function() {
    var _this = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({
      success: function(res) {//成功后的回调
        console.log(res);
        console.log('省份数据：', res.result[0]); //打印省份数据
        console.log('城市数据：', res.result[1]); //打印城市数据
        console.log('区县数据：', res.result[2]); //打印区县数据
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    });
}
```

--------------------------------

### QQMapWX Constructor

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx

Initializes the QQMapWX SDK with your developer key.

```APIDOC
## QQMapWX Constructor

### Description
Initializes the QQMapWX SDK. Requires a developer key.

### Parameters
*   **options** (Object) - Required
    *   **key** (string) - Required - Your developer key obtained from the Tencent Maps developer console.
```

--------------------------------

### Perform Reverse Geocoding with String Location

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder

Call the reverseGeocoder method with a location string (latitude,longitude) to get address information. If no location is provided, it defaults to the current location.

```javascript
qqmapsdk.reverseGeocoder({
      location: e.detail.value.reverseGeo || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
      success: function(res) {//成功后的回调

```

--------------------------------

### Initialize QQ Map SDK

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder

Instantiate the QQMapWX class with your development key to use the SDK's services.

```javascript
var QQMapWX = require('xxx/qqmap-wx.js');

var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});
```

--------------------------------

### Map Component in WXML Template

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection

Defines a map component and a form for user input to plan routes. The map displays the route, and the form collects start and destination coordinates.

```xml
<!--地图容器-->
  <map
    id="myMap"
    style="width: 100%; height: 300px;"
    longitude="{{longitude}}" 
    latitude="{{latitude}}"
    scale='16'
    polyline="{{polyline}}"
    show-location
  >
  </map>
  <form bindsubmit="formSubmit">
      <!--输入起点和目的地经纬度坐标，格式为string格式-->
      <!--起点输入框,同终点，不填默认当前位置-->
      <label>起点坐标：<input style="border:1px solid #000;" name="start"></input></label>
      <!--终点输入框,例：39.908764,116.397524-->
      <label>终点坐标：<input style="border:1px solid #000;" name="dest"></input></label> 
      <!--提交表单数据-->
      <button form-type="submit">路线规划</button>
  </form>
```

--------------------------------

### 微信小程序JavaScript SDK Hello World 示例

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

此示例展示了如何初始化SDK并调用地点搜索接口。请确保已替换'申请的key'为您的有效密钥，并在小程序后台配置了正确的服务器域名。

```javascript
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})
```

--------------------------------

### Initialize QQMapWX SDK

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx

Instantiate the QQMapWX API core class with your developer key. Ensure the key is correctly obtained from the Tencent Maps developer console.

```javascript
var QQMapWX = require('xxx/qqmap-wx.js');

var demo = new QQMapWX({
    key: '开发密钥（key）'
});
```

--------------------------------

### Hello World 示例

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

一个简单的Hello World示例，展示了如何初始化SDK并调用search接口进行酒店搜索。

```APIDOC
## Hello world！
  1. 申请开发者密钥（key）：申请密钥
  2. 开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
  3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
  4. 安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com
  5. 小程序示例

```javascript
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})

```
```

--------------------------------

### Public Transit Route Planning with QQ Map SDK

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection

Initializes the QQ Map SDK and uses the `direction` method to plan a public transit route. It iterates through route steps, extracts polylines for walking and transit segments, decompresses coordinates, and updates the map.

```javascript
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});
 
//在Page({})中使用下列代码
Page({
  data: {
    polyline:[], // 声明polyline，存储路线数据
    // 地图展示位置
    latitude: 39.908764,
    longitude: 116.397524
  },
  //触发表单提交事件，调用接口
  formSubmit(e) {
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'transit',//'transit'(公交路线规划)
      //from参数不填默认当前地址
      from: e.detail.value.start,
      to: e.detail.value.dest, 
      success: function (res) {
        console.log(res);
        var ret = res.result.routes[0];
        var count = ret.steps.length;
        var pl = [];
        var coors = [];
        //获取各个步骤的polyline
        for(var i = 0; i < count; i++) {
          if (ret.steps[i].mode == 'WALKING' && ret.steps[i].polyline) {
            coors.push(ret.steps[i].polyline);
          }
          if (ret.steps[i].mode == 'TRANSIT' && ret.steps[i].lines[0].polyline) {
            coors.push(ret.steps[i].lines[0].polyline);
          }
        }       
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 0 ; i < coors.length; i++){
          for (var j = 2; j < coors[i].length; j++) {
            coors[i][j] = Number(coors[i][j - 2]) + Number(coors[i][j]) / kr;
          }
        }
        //定义新数组，将coors中的数组合并为一个数组
        var coorsArr = [];
        for (var i = 0 ; i < coors.length; i ++){
          coorsArr = coorsArr.concat(coors[i]);
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coorsArr.length; i += 2) {
          pl.push({ latitude: coorsArr[i], longitude: coorsArr[i + 1] })
        }
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          latitude:pl[0].latitude,
          longitude:pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
})
```

--------------------------------

### Driving Route Planning with QQ Map SDK

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection

Initializes the QQ Map SDK and uses the `direction` method to plan a driving route. It handles coordinate decompression and updates the map with the route.

```javascript
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});
 
//在Page({})中使用下列代码
Page({
  data: {
    polyline:[], // 声明polyline，存储路线数据
    // 展示地图当前位置
    latitude: 39.908764,
    longitude: 116.397524
  },

  //触发表单提交事件，调用接口
  formSubmit(e) {
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: e.detail.value.start,
      to: e.detail.value.dest, 
      success: function (res) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].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] })
        }
        console.log(pl)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          // 将路线起点展示在当前位置
          latitude:pl[0].latitude,
          longitude:pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
})
```

--------------------------------

### Reverse Geocoding and Map Display

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder

This snippet demonstrates how to use the reverseGeocoder method to get address information and POIs. It then updates the map with markers, including callouts for the address, and sets the map's center to the geocoded location. This is useful when get_poi is 0 or not specified, focusing on a single target location.

```javascript
wx.request({ 
  url: 'https://apis.map.qq.com/ws/geocoder/v1/',
  data: {
    location: '39.984092,116.307521',
    key: 'OB4BZ-U7WPS-T2ED5-P5X46-WXA7F-2GF5S'
  },
  method: 'GET',
  success: function(res) {
    console.log(res);
    var res = res.result;
    var mks = [];
    /**
     *  当get_poi为1时，检索当前位置或者location周边poi数据并在地图显示，可根据需求是否使用
     *
        for (var i = 0; i < res.pois.length; i++) {
        mks.push({ // 获取返回结果，放到mks数组中
            title: res.pois[i].title,
            id: res.pois[i].id,
            latitude: res.pois[i].location.lat,
            longitude: res.pois[i].location.lng,
            iconPath: './resources/placeholder.png', //图标路径
            width: 20,
            height: 20
        })
        }
    *
    **/
    //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
    mks.push({ // 获取返回结果，放到mks数组中
      title: res.address,
      id: 0,
      latitude: res.location.lat,
      longitude: res.location.lng,
      iconPath: './resources/placeholder.png',//图标路径
      width: 20,
      height: 20,
      callout: { //在markers上展示地址名称，根据需求是否需要
        content: res.address,
        color: '#000',
        display: 'ALWAYS'
      }
    });
    _this.setData({
      //设置markers属性和地图位置poi，将结果在地图展示
      markers: mks,
      // 修改地图展示位置
      latitude: res.location.lat,
      longitude: res.location.lng,
      // 当前地址
      address: res.address
    });
  },
  fail: function(error) {
    console.error(error);
  },
  complete: function(res) {
    console.log(res);
  }
})
  }
})
```

--------------------------------

### Initialize SDK and Perform Nearby Search

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch

This JavaScript code initializes the QQMapWX SDK and demonstrates how to use the search method to find nearby KFC locations. It processes the search results to display markers on a map.

```javascript
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '开发密钥（key）' // 必填
});

Page({
  data: {
    markers:[] // 声明markers，存储marker数据
  },

  // 事件触发，调用接口
  nearby_search:function(){
    var _this = this;
    // 调用接口
    qqmapsdk.search({
      keyword: 'kfc',  //搜索关键词
      location: '39.980014,116.313972',  //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        var mks = []
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[i].title,
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "/resources/my_marker.png", //图标路径
            width: 20,
            height: 20
          })
        }
        _this.setData({ //设置markers属性，将搜索结果显示在地图中
          markers: mks
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res){
        console.log(res);
      }
    });
  }
})


```

--------------------------------

### JavaScript Geocoder Implementation for WeChat Mini Program

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGeocoder

This JavaScript code demonstrates how to initialize the QQMapWX SDK, handle form submission to call the geocoder method, and update the map markers and location data based on the successful geocoding results. It includes success, fail, and complete callback handlers.

```javascript
var QQMapWX = require('xxx/qqmap-wx.js');

var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' 
});

Page({
  data: {
    markers:[], 
    location:{}
  },

  formSubmit(e) {
    var _this = this;
    qqmapsdk.geocoder({
      address: e.detail.value.geocoder, 
      success: function(res) {
        console.log(res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        _this.setData({
          markers: [{
            id: 0,
            title: res.title,
            latitude: latitude,
            longitude: longitude,
            iconPath: './resources/placeholder.png',
            width: 20,
            height: 20,
            callout: {
              content: latitude + ',' + longitude,
              color: '#000',
              display: 'ALWAYS'
            }
          }],
          location: {
            latitude: latitude,
            longitude: longitude
          }
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    })
  }
})

```

--------------------------------

### WXML Template for Input and Suggestions

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGetsuggestion

This WXML snippet shows how to create an input field that binds to the getsuggest function and how to render a list of suggestions based on the 'suggestion' data property. It also includes a bindtap event for selecting an item.

```xml
<!--绑定输入事件-->
<input style="border:1px solid black;" bindinput="getsuggest" value="{{keyword}}"></input>
<!--关键词输入提示列表渲染-->
<view wx:if="{{showSuggestion}}">
   <view wx:for="{{suggestion}}" wx:key="index">
      <!--绑定回填事件-->
      <view bindtap="onSelect">
        <!--根据需求渲染相应数据-->
        <!--渲染地址title-->
        <view style="text-align:center;" bindtap="backfill" id="{{index}}">{{item.title}}</view>
        <!--渲染详细地址-->
        <view style="font-size:12px;color:#666;text-align:center;">{{item.addr}}</view>
      </view>
   </view>
</view>

```

--------------------------------

### QQMapWX Methods

Source: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx

Provides various methods for interacting with Tencent Maps services, such as searching for places, reverse geocoding, route planning, and more.

```APIDOC
## QQMapWX Methods

### search

#### Description
Performs a place search, useful for finding nearby points of interest like hotels, restaurants, or entertainment venues.

#### Parameters
*   **options** (Object) - Required
    *   **keyword** (string) - Required - The search term (e.g., '酒店', '餐饮').
    *   **success** (Function) - Optional - Callback function for successful requests.
    *   **fail** (Function) - Optional - Callback function for failed requests.
    *   **complete** (Function) - Optional - Callback function executed after success or failure.

### getSuggestion

#### Description
Provides input keyword completion and suggestions to aid user input.

#### Parameters
*   **options** (Object) - Required
    *   **keyword** (string) - Required - The input keyword for suggestions.
    *   **success** (Function) - Optional - Callback function for successful requests.
    *   **fail** (Function) - Optional - Callback function for failed requests.
    *   **complete** (Function) - Optional - Callback function executed after success or failure.

### reverseGeocoder

#### Description
Converts coordinates to a textual description of the location, including the address and nearby points of interest.

#### Parameters
*   **options** (Object) - Required
    *   **location** (Object) - Required - The coordinates {latitude: number, longitude: number}.
    *   **success** (Function) - Optional - Callback function for successful requests.
    *   **fail** (Function) - Optional - Callback function for failed requests.
    *   **complete** (Function) - Optional - Callback function executed after success or failure.

### geocoder

#### Description
Converts an address description to its corresponding coordinates. This is the inverse operation of reverse geocoding.

#### Parameters
*   **options** (Object) - Required
    *   **address** (string) - Required - The address to geocode.
    *   **success** (Function) - Optional - Callback function for successful requests.
    *   **fail** (Function) - Optional - Callback function for failed requests.
    *   **complete** (Function) - Optional - Callback function executed after success or failure.

### direction

#### Description
Provides route planning capabilities for driving, walking, cycling, and public transit.

#### Parameters
*   **options** (Object) - Required
    *   **from** (Object) - Required - Starting point {latitude: number, longitude: number}.
    *   **to** (Object) - Required - Destination point {latitude: number, longitude: number}.
    *   **mode** (string) - Optional - Travel mode (e.g., 'driving', 'walking', 'bicycling', 'transit').
    *   **success** (Function) - Optional - Callback function for successful requests.
    *   **fail** (Function) - Optional - Callback function for failed requests.
    *   **complete** (Function) - Optional - Callback function executed after success or failure.

### getCityList

#### Description
Retrieves a list of all cities in China.

#### Parameters
*   None

#### Returns
*   **none** - The results are returned via the success callback.

### getDistrictByCityId

#### Description
Returns the districts within a specified city using its ID.

#### Parameters
*   **options** (Object) - Required
    *   **id** (string) - Required - The ID of the city.
    *   **success** (Function) - Optional - Callback function for successful requests.
    *   **fail** (Function) - Optional - Callback function for failed requests.
    *   **complete** (Function) - Optional - Callback function executed after success or failure.

### calculateDistance

#### Description
Calculates the walking or driving distance from one point to multiple other points.

#### Parameters
*   **options** (Object) - Required
    *   **from** (Object) - Required - The starting point {latitude: number, longitude: number}.
    *   **to** (Array<Object>) - Required - An array of destination points [{latitude: number, longitude: number}].
    *   **mode** (string) - Optional - Travel mode ('walking' or 'driving').
    *   **success** (Function) - Optional - Callback function for successful requests.
    *   **fail** (Function) - Optional - Callback function for failed requests.
    *   **complete** (Function) - Optional - Callback function executed after success or failure.
```
Tokens:
Raw