uni-app 小程序使用腾讯地图原生SDK搜索联想词

前言

• 之前我们使用了高德地图搜索地点，它是原生小程序写法，把它转换成uni-app（vue写法）。

• 这篇文章记录一下搜索联想词的使用，转换成vue语法，详细的引入主页文章有。

• 需要在uni-app配置SDK文件，和位置权限，主页文章有（uni-app 小程序使用腾讯地图完成搜索功能）

• 引入完成之后，注意填写自己key，可以直接复制到uni-app

代码如下

<template>
    <view>
        <!--绑定输入事件-->
        <input style="border:1px solid black;" @input="getsuggest" v-model="ckfill"></input>
        <!--关键词输入提示列表渲染-->
        <view v-for="(item,index) in suggestion" :key="index">
            <!--绑定回填事件-->
            <view>
                <!--根据需求渲染相应数据-->
                <!--渲染地址title-->
                <view style="text-align:center;" @click="backfill(item.id)">{{item.title}}</view>
                <!--渲染详细地址-->
                <view style=" font-size:12px;color:#666;text-align:center;">{{item.addr}}</view>
            </view>
        </view>
    </view>
</template>
​
<script>
    import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
    export default {
        data() {
            return {
                // 联想值
                suggestion: [],
                // 腾讯地图实例
                qqmapsdk: '',
                ckfill: ''
            }
        },
        created() {
            this.qqmapsdk = new QQMapWX({
                key: '腾讯地图key'
            });
        },
        methods: {
            backfill(id) {
                console.log('id');
                const that = this
                this.suggestion.forEach(item => {
                    if (item.id == id) {
                        that.ckfill = item.title
                    }
                })
            },
            //触发关键词输入提示事件
            getsuggest(e) {
                const _this = this;
                //调用关键词提示接口
                console.log('参数值', e.detail.value);
                _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
                            });
                        }
                        //设置suggestion属性，将关键词搜索结果以列表形式展示
                        _this.suggestion = sug
​
                    },
                    fail: function(error) {
                        console.error(error);
                    },
                    complete: function(res) {
                        console.log(res);
                    }
                });
            }
        }
    }
</script>
​
<style>
​
</style>

---

总结：

经过这一趟流程下来相信你也对 uni-app 小程序使用腾讯地图原生SDK搜索联想词 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕