Imagen de efecto:
descarga de qqmap-wx-jssdk.js
<template>
<view class="items">
<view class="items-text">地址（必填）</view>
<input type="text" placeholder="搜索地址" maxlength="255" v-model="detailAddress" @input="getsuggest"></input>
<!--关键词输入提示列表渲染-->
<view class="address-list" v-if="showAddressList == true">
<view v-for="(item, index) in suggestion" :key="index">
<!--绑定回填事件-->
<view class="list-item" @click="backfill" :id="index">
<!--根据需求渲染相应数据-->
<!--渲染地址title-->
<view>{
{
item.title}}</view>
<!--渲染详细地址-->
<view class="addr-text">{
{
item.addr}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '此处填腾讯地图key值' // 必填
});
export default {
data() {
showAddressList: false,//是否显示地址列表
detailAddress: '', //详细地址
suggestion: [], //联想地址列表
longitude: '', // 经度
latitude: '', // 纬度
}
methods:{
// 联想地址 start
//数据回填方法
backfill: function(e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.suggestion.length; i++) {
if (i == id) {
this.detailAddress = this.suggestion[i].title
this.longitude = this.suggestion[i].longitude
this.latitude = this.suggestion[i].latitude
}
}
this.showAddressList = false
},
//触发关键词输入提示事件
getsuggest: function(e) {
var _this = this;
//调用关键词提示接口
qqmapsdk.getSuggestion({
//获取输入框值并设置keyword参数
keyword: this.detailAddress, //用户输入的关键词，可设置固定值,如keyword:'KFC'
region: '济南', //设置城市名，限制关键词所示的地域范围，非必填参数
success: function(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
_this.showAddressList = true
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
},
//联想地址 end
}
}
</script>