uniapp 小程序 联想地址搜索

news2024/11/25 14:29:12

效果图:
在这里插入图片描述
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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/770571.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SQL-每日一题【585.2016年的投资】

题目 Insurance 表&#xff1a; 请你编写一个 SQL 查询&#xff0c;报告 2016 年 (tiv_2016) 所有满足下述条件的投保人的投保金额之和&#xff1a; 他在 2015 年的投保额 (tiv_2015) 至少跟一个其他投保人在 2015 年的投保额相同。他所在的城市必须与其他投保人都不同&#…

Revit中如何添加剖面?快速实现剖面图

一、Revit中如何添加剖面&#xff1f; 除了标高绘制所得到的楼层平面视图和立面视图之外&#xff0c;还可以添加剖面视图&#xff0c;这样可以得到任意位置一个竖向的剖切面&#xff0c;例如在楼梯细节处理中&#xff0c;楼梯处于建筑物内部&#xff0c;立面也看不到整个楼梯的…

pdf怎么翻译?有这个工具就够了

pdf怎么翻译&#xff1f;PDF文档一直是我们日常生活和工作中不可避免的一部分。但是&#xff0c;当我们需要翻译PDF文件时&#xff0c;我们往往会感到无助&#xff0c;因为PDF文档不能像其他文本文件一样直接复制和粘贴。那么今天就给大家介绍一款可以帮助我们进行PDF翻译的工具…

Pytorch框架中各文件的作用

新人在接触Pytorch以及深度学习等领域时&#xff0c;面对一个开源的代码可能无从下手&#xff0c;一个Pytorch框架相对比较负责&#xff0c;文件也多&#xff0c;其中的逻辑不免让初学者感到不知所措&#xff0c;下面大致梳理一下Pytorch各文件夹的作用和逻辑&#xff0c;其中的…

基于 Orbit 的云原生应用交付基础原则与良好实践

本文作者&#xff1a;何文强——腾讯云 CODING 高级架构师。 负责 CODING DevOps产品解决方案架构设计和技术产品布道以及 CODING 云原生技术研究与落地实践。在多个技术大会担任演讲嘉宾&#xff0c;腾讯云 CODING DevOps 课程认证出品人&#xff0c;腾讯云云原生训练营核心初…

上市公司Git分支管理规范

Git分支管理策略 主分支Master 首先&#xff0c;代码库应该有一个、且仅有一个主分支。所有提供给用户使用的正式版本&#xff0c;都在这个主分支上发布。 Git主分支的名字&#xff0c;默认叫做Master。它是自动建立的&#xff0c;版本库初始化以后&#xff0c;默认就是在主…

ASEMI快恢复二极管MUR20100CT尺寸, MUR20100CT体积

编辑-Z MUR20100CT参数描述&#xff1a; 型号&#xff1a;MUR20100CT 最大峰值反向电压(VRRM)&#xff1a;1000V 最大RMS电压(VRMS)&#xff1a;700V 最大直流阻断电压(VDC)&#xff1a;1000V 平均整流正向电流(IF)&#xff1a;20A 非重复峰值浪涌电流(IFSM)&#xff1a…

Revit中墙体的问题,门窗洞口及柱断梁墙

一、如何同时开两道相邻墙的门窗洞口 做外墙装饰的时候&#xff0c;我们很经常为了方便、简洁在已经绘制好的墙体外围再绘制一面墙体&#xff0c;并且添加上材质作为外饰面&#xff0c;提高工作效率;但是遇到有门窗洞口的墙体时&#xff0c;外饰面墙体却没办法直接被门窗剪切&a…

LeetCode142.环形链表II

142.环形链表II 目录 142.环形链表II一、哈希表二、双指针 一、哈希表 和141题.判断链表是否有环类似&#xff0c;区别在于141题只要求判断链表中是否有环&#xff0c;该题则要求我们返回入环节点 一个非常直观的思路&#xff1a;遍历链表中的每个节点&#xff0c;并将它们记…

【论文】基于GANs的图像文字擦除 ——2010.EraseNet: End-to-End Text Removal in the Wild(已开源)

pytorch官方代码&#xff1a;https://github.com/lcy0604/EraseNet 论文&#xff1a;2010.EraseNet: End-to-End Text Removal in the Wild 网盘提取码&#xff1a;0719 一、图片文字去除效果 图10 SCUT-EnsText 真实数据集的去除 第一列原图带文字、第二列为去除后的标签&a…

【数据结构常见七大排序(三)上】—交换排序篇【冒泡排序】And【快速排序】

目录 前言 1.冒泡排序 1.1冒泡排序动图 1.2冒泡排序源代码 1.3冒泡排序的特性总结 2.快速排序&#x1f451; 2.1hoare版本实现思想 排序前 排序中 排序后 2.2hoare版本快排源代码 2.3分析先走 情况1&#x1f947; 情况2&#x1f948; 前言 交换类排序两个常见的排…

7月31日起,这类产品将禁止在亚马逊美国站销售!

亚马逊美国站发布公告称由于口腔胶带&#xff08;睡眠胶带&#xff09;在睡觉时存在潜在危险&#xff0c;出于对消费者的安全考虑&#xff0c;任何睡眠胶带产品的listing将在亚马逊商店下架&#xff0c;以下是公告内容&#xff1a; 自2023年7月31日起&#xff0c;口腔胶带&…

Docker 应用容器引擎

Docker 应用容器引擎 一、Docker是什么二、Docker安装和查看1、docker安装2、docker版本信息查看3、docker信息查看 三、镜像操作四、容器操作1、容器创建2、创建并启动容器3、容器的进入4、复制5、容器的导入和导出6、删除容器 一、Docker是什么 是一个开源的应用容器引擎&…

Java遍历集合方法分析(实现原理、算法性能、适用场合)

Java遍历集合方法分析&#xff08;实现原理、算法性能、适用场合&#xff09; 概述 java语言中&#xff0c;提供了一套数据集合框架&#xff0c;其中定义了一些诸如List、Set等抽象数据类型&#xff0c;每个抽象数据类型的各个具体实现&#xff0c;底层又采用了不同的实现方式…

56 # 实现 pipe 方法进行拷贝

pipe 是异步的&#xff0c;可以实现读一点写一点&#xff0c;管道的优势&#xff1a;不会淹没可用内存&#xff0c;但是在导入的过程中无法获取到内容 const fs require("fs"); const path require("path");fs.createReadStream(path.resolve(__dirname…

电脑记事本笔记误删如何找回?恢复删除的笔记方法

电脑上有很多好用的记事本软件。以Windows电脑为例&#xff0c;比较经典的有txt记事本&#xff0c;每个记事本可以单独的文件形式保存&#xff0c;误删某个记事本文件后可通过回收站找回&#xff0c;还原恢复。而如果正编辑笔记的时候误删了笔记&#xff0c;还未保存的情况下可…

2023 年第四次工业革命(工业4.0)指南

全球工业4.0市场在2019年估计为70亿美元&#xff0c;预计到2026年将达到210亿美元&#xff0c;因为越来越多的制造企业正在优化其数字化转型战略。工业4.0&#xff0c;也被称为第四次工业革命&#xff0c;旨在创建智能制造机器和系统&#xff0c;这些机器和系统经过连接&#x…

随手笔记——如何手写高斯牛顿法

随手笔记——如何手写高斯牛顿法 说明源代码 说明 将演示如何手写高斯牛顿法 源代码 #include <iostream> #include <chrono> #include <opencv2/opencv.hpp> #include <Eigen/Core> #include <Eigen/Dense>using namespace std; using names…

IIS 日志分析

Microsoft互联网信息服务&#xff08;IIS&#xff09;服务器&#xff0c;包括Web和FTP&#xff0c;已成为企业必不可少的。但是&#xff0c;IT 安全管理员的工作并不仅仅局限于部署 IIS 服务器。部署后&#xff0c;管理员必须采取安全措施来保护这些服务器。监视 IIS 服务器安全…

MacOS上安装Portainer

Portainer介绍 Portainer 是一个很方便的 Docker 可视化管理工具。主要的功能包括: 管理 Docker 主机,可以添加和删除 Docker 主机管理容器,可以启动、停止、删除等容器管理镜像,可以搜索、拉取、删除镜像管理卷,可以查看、删除卷管理网络,可以创建 Docker 网络管理用户和角色…