uniapp 小程序 联想地址搜索

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决Missing cookie ‘JssionId‘ for method parameter of type String问题

错误描述如下所示&#xff1a; 上述错误是我在使用CookieValue注解&#xff0c;获取cookieID时出现的&#xff0c;错误原因是由于**CookieValue注解注解中的value值和浏览器中的cookie的jssionID不一致所导致的** 如下所示为浏览器中的CookieID的参数名 而我在注解中写的如下图…

自动化测试之数据驱动与关键字驱动

目录 1.录制/回放的神话 2.数据驱动的自动化测试框架 3.关键字驱动的自动化测试 初次接触自动化测试时&#xff0c;对数据驱动和关键字驱动不甚理解&#xff0c;觉得有点故弄玄须&#xff0c;不就是参数和函数其嘛&#xff01;其实其也体现了测试所不同与开发的一些特点&…

基于遗传算法的新能源电动汽车充电桩与路径选择MATLAB程序

主要内容&#xff1a; 根据城市间的距离&#xff0c;规划新能源汽车的行驶路径。要求行驶距离最短。 部分代码&#xff1a; %% 加载数据 %%遗传参数 load zby;%个城市坐标位置 NIND50; %种群大小 MAXGEN200; Pc0.9; %交叉概率 Pm0.2; %变异概率 GGAP0.…

postman 自动化测试

postman 自动化测试 0、写在前面1、变量引用1.1、如何在请求体中引用变量 2、变量设置2.1、测试需求场景描述&#xff1a;2.2、postman实战2.2.1、全局token的处理2.2.2、接口1的处理2.2.3、接口2的处理2.2.4、接口3的处理 3、测试结果展示 0、写在前面 在有些时候看官方文档 …

聚焦型光场相机基于立体视差的深度估计原理

聚焦型光场相机可以看作是主透镜将物面成了一个放大或者缩小的虚像&#xff0c;然后每个微透镜阵列对这个经过放大或者缩小的虚像进行二次成像后投影在了ccd平面&#xff0c;其中二次成像的过程可以比拟为一个虚拟阵列相机&#xff0c;利用MLA和主透镜的相关参数就可以以立体视…

Android系统开发-入门篇

参见&#xff1a;[视频教程] 写给应用开发的 Android Framework 教程——玩转 AOSP 篇之 Android 系统开发工具推荐 - 掘金 前置条件&#xff1a; android系统源码位于 linux 服务器&#xff0c;ssh 地址假如为&#xff1a;test172.1.10.2本机为windows 1、本机&#xff1a; 下…

访问Liunx文件系统

访问Liunx文件系统 识别文件系统和设备 存储管理概念 Linux服务器上文件按文件系统层次结构访问。该文件系统层次结构测试由系统可用的存储设备所提供的文件系统组装而来。每个文件系统都是一个已格式化的存储设备&#xff0c;可用于存储文件。 文件系统和挂载点 要让文件系…

【mysql】—— 数据库的操作

序言&#xff1a; 在上篇文章我已经对数据库进行了详细的介绍&#xff0c;接下来我们就将上手学习操作的细节了。本篇文章便带领大家去学习有关库操作的基本知识&#xff01;&#xff01;&#xff01; 目录 &#xff08;一&#xff09;库的操作 1、 创建数据库 2、字符集和…

HTML input text 常用事件

前言 用于记录开发中常用到的&#xff0c;快捷开发 简单实例 <input type"text" name"noSecretKeyJson" maxlength"200" />常用事件 oninput &#xff08;在用户输入时触发&#xff09;及案例 案例一&#xff1a;限制只允许输入数字…

C#基础--反射

反射 一、为什么学习反射 因为反射真的是无处不在&#xff0c;ORM、MVC、IOC、AOP、Attribute等等都会使用到反射。反射是程序员的快乐 二、什么是反射 Ilspy&#xff1a;逆向工程&#xff0c;可以吧DLL/Exe文件反编译回来 DLL/EXE 文件下包含Metadata和IL&#xff0c;IL是对…

跨文化合作:如何解决海外网红营销中的文化差异?

随着社交媒体的快速发展&#xff0c;海外网红营销已成为许多品牌和企业获取国际市场的有效方式。然而&#xff0c;由于不同国家和地区存在着独特的文化差异&#xff0c;如语言、价值观、习俗等&#xff0c;这也给品牌进行海外网红营销带来了一系列挑战。本文Nox聚星将和大家探讨…

WPF 自定义控件完成库容表盘显示效果

先看一下显示效果&#xff1a; 需要注意的地方有以下几点&#xff1a; 表盘的刻度分部&#xff0c;长刻度和短刻度显示。在数值80W时&#xff0c;需要更改刻度盘的颜色渐变。在数值80W时&#xff0c;更改库容总数背景的显示&#xff0c;也是颜色渐变。刻度盘控件属性定义&…

JVM中的堆和栈到底存储了什么

JVM数据区 先上一张Java虚拟机运行时数据区中堆、栈以及方法区存储数据的概要图&#xff0c;如下所示&#xff1a; 然后我们来具体解析一下堆和栈 堆 堆是存储时的单位&#xff0c;对于绝大多数应用来说&#xff0c;这块区域是 JVM 所管理的内存中最大的一块。线程共享&#…

JavaScript XHR、Fetch

1 前端数据请求方式 2 Http协议的解析 3 XHR的基本用法 4 XHR的进阶和封装 5 Fetch的使用详解 6 前端文件上传流程 早期的页面都是后端做好&#xff0c;浏览器直接拿到页面展示的&#xff0c;用到的是jsp、asp、php等等的语言。 这个叫做服务器端渲染SSR。 这里后端向前端…

[sqoop]导入数据

一、覆盖导入 例如维度表&#xff0c;每次导入的数据需要覆盖上次导入的数据。 hive-overwrite参数&#xff1a;实现覆盖导入 hive-import参数&#xff1a;表示向hive表导入 hive-table参数&#xff1a;指定目标hive库表 sqoop import \ --connect jdbc:mysql://hadoop1:3…

介绍性能压力测试的重要性

在当今数字化时代&#xff0c;软件和应用程序的性能对于用户体验和业务成功至关重要。为了确保系统在面临高负载和压力时能够正常运行&#xff0c;性能压力测试成为一项不可或缺的活动。本文将介绍性能压力测试的重要性。 性能压力测试是一种通过模拟实际场景中的负荷和用户访问…

前端两种实现轮播图方式

今天研究两种简单实现轮播图功能的方式。 目录 Layui实现轮播图 码云下载 提取静态文件 示例 注意 参数说明 改为轮播图 增加图片资源文件 轮播栏目修改 改为上下切换 切换事件 脚本中绑定改变事件 控制器查看 Swiper实现轮播图 下载swiper 下载到本地 加载sw…

EMC学习笔记(十七)PCB设计中的安规考虑

PCB设计中的安规考虑 1 概述2.安全标识2.1 对安全标示通用准则2.2 电击和能量的危险2.3 PCB上的熔断器2.4 可更换电池 3.爬电距离和电气间隙4.涂覆印制板4.1 PCB板的机械强度4.2 印制电路板的阻燃等级4.3 热循环试验与热老化试验4.4 抗电强度试验4.5 耐划痕试验 5.布线和供电 1…

网络安全(黑客)万字自学笔记

目录 特别声明&#xff1a; 一、前言 二、定义 三、分类 1.白帽黑客&#xff08;White Hat Hacker&#xff09; 2.黑帽黑客&#xff08;Black Hat Hacker&#xff09; 3.灰帽黑客&#xff08;Gray Hat Hacker&#xff09; 四、黑客文化 五、伦理问题 六、黑客的作用 …

shell脚本备份数据库

首先是在本地windows环境下尝试备份数据库 打开mysql的bin目录&#xff0c;然后在地址栏cmd&#xff0c;进入cmd界面&#xff0c;输入mysqldump命令&#xff0c;-u输入用户名&#xff0c;-p输入密码 还有数据库名称&#xff0c;以及后面要保存到的位置 mysqldump -uroot -p tes…