当前位置: 首页 > 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.插入元素和删除元素函…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...