微信小程序实现路径导航—使用搜索组件Searchbar + 腾讯地图sdk

一、搜索组件Searchbar

Searchbar是微信小程序WeUI组件库中的，在【微信官方文档·小程序】的【扩展能力】中有详细的介绍哦！
链接: 扩展能力.

二、腾讯地图sdk

链接: 开发指南.
Hello world！下的四条必须按照步骤严格完成哦！

三、开发准备

在项目根目录下，新建文件夹存放前面下载好的jssdk文件，pages目录下新建页面navigation实现导航

四、敲代码

navigation.json

{
    "usingComponents": {
        "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
    },
    "navigationBarTitleText": "微信小程序—路径导航"
  }

navigation.wxml

<!-- navigation.wxml -->
<!-- 搜索组件Searchbar -->
<view class="page">
    <view class="page__bd">
        <mp-searchbar bindselectresult="selectResult" search="{{search}}" throttle="100"></mp-searchbar>
    </view>
</view>

navigation.js

// pages/navigation/navigation.js

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
const QQMapWX = require('../../qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
let qqmapsdk;

Page({
    search: function (value) {  // 输入框输入时触发这个方法
        // console.log(value);
        // return new Promise((resolve, reject) => {
        //         resolve([
        //             {text: '搜索结果1', value: 1}, 
        //             {text: '搜索结果2', value: 2}
        //         ])
        // })

        return new Promise((resolve,reject)=>{
                // 删除输入框的内容，列表还在，加上判断，清空列表
                // 输入框为空时，传入一个空数组
                if(value == ""){
                    resolve([]);
                    return
                }

                // 调用getSuggestion 关键词输入提示
                qqmapsdk.getSuggestion({
                    keyword:value, //用户输入的关键词  获取输入框值并设置keyword参数
                    region:"南京市",
                    page_size:6,
                    success(res){
                        // console.log(res);
                        let data = res.data.map(item=>{     // 数组的map方法映射
                            return {
                                text:item.title,
                                ...item
                            }

                        })
                        // console.log(data);
                        resolve(data)
                        
                    },
                    fail(err){
                        console.log(err);
                    }
                })

        })

    },
    selectResult(sel){  // 选择的时候触发这个方法
        // console.log(sel);
        let {item} = sel.detail;    // 拿到sel.detail中的item
        // console.log(item);
        let {lat:latitude,lng:longitude} = item.location;    // 拿到经纬度 取别名为英文全称
        // 点击选择时，要调用wx.openLocation({}) 打开地理位置
        wx.openLocation({
          latitude,
          longitude,
          name:item.text,
          scale:18,
          address:item.address
        })

    },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
       // 实例化API核心类
       qqmapsdk = new QQMapWX({
            key: '开发密钥（key）' // 必填
        });

        this.setData({
            search: this.search.bind(this)
        })

  }

})

五、最终效果