uniapp 小程序联想地址搜索-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 小程序联想地址搜索。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：
uniapp 小程序联想地址搜索,uni-app,小程序
qqmap-wx-jssdk.js下载文章来源地址https://www.toymoban.com/news/detail-597375.html

<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>