当前位置: 首页 > news >正文

vue使用谷歌地图实现地点查询

效果
在这里插入图片描述
在这里插入图片描述
代码
首先在index.html中引入谷歌地图资源

 <script src="https://maps.googleapis.com/maps/api/js?key='你的api密钥'&libraries=places"></script>

页面中

<template><div class="pac-card div-style" id="pac-card"><div id="map" class="flex-item1"></div><div id="pac-container" class="flex-item2"><el-inputv-model="localValue"ref="autocompleteInput"type="text"placeholder="输入地址"@input="handleInput"/><ulv-if="predictions.length != 0 && localValue != ''"class="autocomplete-list"><listyle="list-style: none"v-for="prediction in predictions":key="prediction.place_id"@click="selectPrediction(prediction)">{{ prediction.description }}</li></ul></div></div>
</template><script>
export default {name: "addressMap",data() {return {localValue: "",map: "",marker: "",longitude: -73.98633,latitude: 40.749933,predictions: [], // 存储搜索框提示的预测结果};},methods: {selectPrediction(prediction) {this.localValue = prediction.description;this.predictions = [];const that = this;// 创建 PlacesService 对象const placesService = new google.maps.places.PlacesService(map);// 获取地点的 Place IDconst placeId = prediction.place_id;// 发起 Places API 请求placesService.getDetails({ placeId: placeId }, function (place, status) {if (status === google.maps.places.PlacesServiceStatus.OK) {// 获取地点的经纬度坐标that.latitude = place.geometry.location.lat();that.longitude = place.geometry.location.lng();that.initMap();} else {alert("无法找到该地点!");}});},handleInput() {const autocompleteService = new google.maps.places.AutocompleteService();autocompleteService.getPlacePredictions({ input: this.localValue },(predictions, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {this.predictions = predictions;} else {this.predictions = [];}});},initMap() {const map = new google.maps.Map(document.getElementById("map"), {center: { lat: this.latitude, lng: this.longitude },zoom: 13,mapTypeControl: false,});},},mounted() {this.initMap();},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#map {overflow: hidden;width: 300px;height: 400px;margin: 0;
}
.div-style {display: flex;
}
.flex-item1 {flex: 2;
}
.flex-item2 {flex: 1;
}
.autocomplete-list {height: 200px;overflow: auto;ul {li {margin: 10px 0;}}
}
</style>

相关文章:

vue使用谷歌地图实现地点查询

效果 代码 首先在index.html中引入谷歌地图资源 <script src"https://maps.googleapis.com/maps/api/js?key你的api密钥&librariesplaces"></script>页面中 <template><div class"pac-card div-style" id"pac-card"…...

前端该了解的网络知识

网络 前端开发需要了解的网络知识 URL URL(uniform resource locator,统一资源定位符)用于定位网络服务. URL是一个固定格式的字符串 它表达了: 从网络中哪台计算机(domain)中的哪个服务(port),获取服务器上资源的路径(path),以及要用什么样的协议通信(schema). 注意: 当…...

python3在虚拟环境实用vscode调试错误输出ModuleNotFoundError: No module named ‘django‘解决方法

Exception has occurred: ImportError Couldnt import Django. Are you sure its installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?File "/data/mountain-backend/src/manage.py", line 8, i…...

如何获得一个Oracle 23c免费开发者版

获取23c开发者版 简单介绍可参考这里。 获取数据库可以参考这篇文章Introducing Oracle Database 23c Free – Developer Release或这里。 Docker Image 这是最快的方法。在OCI上创建一个计算实例&#xff0c;然后就可以拉取image使用了。 docker的安装和配置不赘述了。 …...

机器学习策略二——优化深度学习系统

进行误差分析 (Carrying out error analysis) 如果你希望让学习算法能够胜任人类能做的任务&#xff0c;但你的学习算法还没有达到人类的表现&#xff0c;那么人工检查一下你的算法犯的错误也许可以让你了解接下来应该做什么。这个过程称为错误分析。 假设你正在调试猫分类器…...

Pytorch Advanced(三) Neural Style Transfer

神经风格迁移在之前的博客中已经用keras实现过了&#xff0c;比较复杂&#xff0c;keras版本。 这里用pytorch重新实现一次&#xff0c;原理图如下&#xff1a; from __future__ import division from torchvision import models from torchvision import transforms from PIL…...

英飞凌TC3xx--深度手撕HSM安全启动(三)--TC3xx HSM系统架构

今天聊TC3xx HSM系统,包括所用内核、UCB相关信息、Host和HSM交互方式。 1、HSM系统架构 下图来源于英飞凌官网培训材料。 TC3xx的HSM内核是一颗32位的ARM Cortex M3,主频可达100MHz,支持对称算法AES128、非对称算法PKC(Public Key Crypto) ECC256、Hash SHA2,以及T…...

黑马JVM总结(五)

&#xff08;1&#xff09;方法区 它是所有java虚拟机 线程共享的区&#xff0c;存储着跟类的结构相关的信息&#xff0c;类的成员变量&#xff0c;方法数据&#xff0c;成员方法&#xff0c;构造器方法&#xff0c;特殊方法&#xff08;类的构造器&#xff09; 方法区在虚拟机…...

C语言入门Day_18 判断和循坏的小结

目录 前言&#xff1a; 1.判断 2.循环 3.课堂笔记 4.思维导图 前言&#xff1a; 判断语句和循环语句都可以大致分为三个部分&#xff0c;第一个部分是固定的语法格式&#xff1b;第二部分是代码的执行顺序&#xff0c;第三部分是判断和循环成立与否的判断条件。 1.判断 1…...

mac 好用的工具推荐

mac 好用的工具推荐 落雪&#xff1a;全网的音乐畅听&#xff0c;下载地址&#xff1a;https://github.com/lyswhut/lx-music-desktopMotrix: 免费下载工具&#xff0c;下载地址&#xff1a;https://xclient.info/s/motrix.html#versionsDownie&#xff1a;视频下载工具&#x…...

星际争霸之小霸王之小蜜蜂(十二)--猫有九条命

系列文章目录 星际争霸之小霸王之小蜜蜂&#xff08;十一&#xff09;--杀杀杀 星际争霸之小霸王之小蜜蜂&#xff08;十&#xff09;--鼠道 星际争霸之小霸王之小蜜蜂&#xff08;九&#xff09;--狂鼠之灾 星际争霸之小霸王之小蜜蜂&#xff08;八&#xff09;--蓝皮鼠和大…...

【软件分析/静态分析】chapter8 课程11/12 指针分析—上下文敏感(Pointer Analysis - Context Sensitivity)

&#x1f517; 课程链接&#xff1a;李樾老师和谭天老师的&#xff1a; 南京大学《软件分析》课程11&#xff08;Pointer Analysis - Context Sensitivity I&#xff09;_哔哩哔哩_bilibili 南京大学《软件分析》课程12&#xff08;Pointer Analysis - Context Sensitivity II&…...

时间复杂度与空间复杂度详解

时间复杂度与空间复杂度详解&#x1f996; 一、算法效率1.1 如何衡量一个算法的好坏1.2 算法的复杂度 二、时间复杂度2.1 时间复杂度的定义2.2 大O的渐进表示法2.3 如何记录表示算法复杂度 三、空间复杂度3.1 空间复杂度的定义3.2 小试牛刀 一、算法效率 1.1 如何衡量一个算法…...

目录操作函数

mkdir函数 rmdir函数 删除空目录 rename函数 换名 chdir函数 修改当前的工作目录 getcwd函数 获取当前工作的路径...

PlantUML入门教程:画时序图

软件工程中会用到各种UML图&#xff0c;例如用例图、时序图等。那我们能不能像写代码一样去画图呢&#xff1f; 今天推荐一款软件工程师的作图利器--PlantUML&#xff0c;它能让你用写代码的方式快速画出UML图。 一、什么是PlantUML&#xff1f; PlantUML是一个允许你快速作出…...

C#范围运算符

C#8.0语法中&#xff0c;范围运算符是一种用于快速截取序列的运算符&#xff0c;其语法为 “start…end”&#xff0c;表示从序列的 “start” 索引处开始&#xff0c;一直截取到"end" 索引处为止&#xff08;包括 “end” 索引处的元素&#xff09;。范围运算符主要…...

云数据库知识学习——云数据库产品、云数据库系统架构

一、云数据库产品 1.1、云数据库厂商概述 云数据库供应商主要分为三类。 ① 传统的数据库厂商&#xff0c;如 Teradata、Oracle、IBM DB2 和 Microsoft SQL Server 等。 ② 涉足数据库市场的云供应商&#xff0c;如 Amazon、Google、Yahoo!、阿里、百度、腾讯…...

C++中引用详解!

前言&#xff1a; 本文旨在讲解C中引用的相关操作&#xff0c;以及引用的一些注意事项&#xff01;搬好小板凳&#xff0c;干货来了&#xff01; 引用的概念 何谓引用呢&#xff1f;引用其实很容易理解&#xff0c;比如李华这个同学&#xff0c;他因为很调皮&#xff0c;所以…...

VUE3+TS项目无法找到模块“../version/version.js”的声明文件

问题描述 在导入 ../version/version.js 文件时&#xff0c;提示无法找到模块 解决方法 将version.js改为version.ts可以正常导入 注意&#xff0c;因为version.js是我自己写的模块&#xff0c;我可以直接该没有关系&#xff0c;但是如果是引入的其他的第三方包&#xff0c…...

数据结构-堆的实现及应用(堆排序和TOP-K问题)

数据结构-堆的实现及应用[堆排序和TOP-K问题] 一.堆的基本知识点1.知识点 二.堆的实现1.堆的结构2.向上调整算法与堆的插入2.向下调整算法与堆的删除 三.整体代码四.利用回调函数避免对向上和向下调整算法的修改1.向上调整算法的修改2.向下调整算法的修改3.插入元素和删除元素函…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...