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

uniapp:谷歌地图,实现地图展示,搜索功能,H5导航

页面展示

APP
在这里插入图片描述
H5
在这里插入图片描述

谷歌地图功能记录,谷歌key申请相对复杂一些,主要需要一些国外的身份信息。

1、申请谷歌key

以下是申请谷歌地图 API 密钥的流程教程:
登录谷歌开发者控制台:打开浏览器,访问 Google Cloud Platform Console。

1、创建或选择项目:如果你还没有创建项目,请点击右上角的下拉菜单旁边的“选择项目”按钮,并点击“新建项目”。如果已有项目,请选择该项目。

2、启用谷歌地图 API:在项目仪表盘中,点击左侧导航栏的“API和服务”,然后点击“库”。

3、搜索地图相关的 API:在搜索框中输入“Maps JavaScript API”(谷歌地图 JavaScript API),然后点击搜索结果中的“Maps JavaScript API”。

4、启用 API:点击页面上的“启用”按钮来启用谷歌地图 JavaScript API。

5、创建凭证:在左侧导航栏中,点击“凭据”,然后点击“创建凭据”按钮。选择“API 密钥”。

6、获取 API 密钥:在弹出窗口中,你可以看到生成的 API 密钥。复制这个密钥,稍后会在你的应用程序中使用它。

7、限制 API 密钥(可选):你可以选择对 API 密钥进行一些限制,例如设置 IP 地址限制、启用服务限制等。这可以提高你的 API 密钥的安全性。

现在,你已经成功申请到谷歌地图 API 密钥了。接下来,你可以将这个密钥应用到你的应用程序中,并开始使用谷歌地图 API 提供的功能。记住要保护好你的 API 密钥,不要公开分享给其他人,以确保安全性。

2、manifest.json配置申请到的key

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
定位你可以选择系统定位,或者自己去申请高德key。

3、代码部分,H5导航相对简单,只需要跳转谷歌地图,并把地址带过去就可以API

let address = encodeURIComponent(this.detail.address);
let url = 'https://www.google.com/maps/search/?api=1&query='+address
// 谷歌地图
// #ifdef H5
location.href = url
// #endif
// #ifdef APP-PLUS
console.log(url);
plus.runtime.openURL(url)
// #endif

4、实现APP地图展示,以及搜索功能。(页面需要是NVUE)

<template><view class="index"><!-- 这里是状态栏 --><view :style="{ height: iStatusBarHeight + 'px'}"></view><view class="navbar"><image src="../../static/icon/0.png" mode="" class="arr" @click="go('none')"></image><text class="btn" @click="go">confirm</text></view><map style="width: 750rpx;height: 500rpx;" :longitude="longitude" :latitude="latitude" :scale="scale":markers="markers" :include-points="includePoints" :show-compass="true" :show-location="true"></map><view class="list"><view class="search"><input type="text" v-model="searchVal

相关文章:

uniapp:谷歌地图,实现地图展示,搜索功能,H5导航

页面展示 APP H5 谷歌地图功能记录,谷歌key申请相对复杂一些,主要需要一些国外的身份信息。 1、申请谷歌key 以下是申请谷歌地图 API 密钥的流程教程: 登录谷歌开发者控制台:打开浏览器,访问 Google Cloud Platform Console。 1、创建或选择项目:如果你还没有创建项目…...

关于腾讯云轻量应用服务器性能测评,看这一篇文章就够了

腾讯云轻量应用服务器性能如何&#xff1f;为什么便宜是不是性能不行&#xff1f;腾讯云百科txybk.com从轻量应用服务器的CPU型号、处理器主频、内存、公网带宽、月流量和系统盘多方面来详细测评轻量性能&#xff0c;轻量应用服务器性价比高&#xff0c;并不是性能不行&#xf…...

HDFS集群NameNode高可用改造

文章目录 背景高可用改造方案实施环境准备配置文件修改应用配置集群状态验证高可用验证 背景 假定目前有3台zookeeper服务器&#xff0c;分别为zk-01/02/03&#xff0c;DataNode服务器若干&#xff1b; 目前HDFS集群的Namenode没有高可用配置&#xff0c;Namenode和Secondary…...

Spark集群中一个Worker启动失败的排错记录

文章目录 1 检查失败节点worker启动日志2 检查正常节点worker启动日志3 查看正常节点spark环境配置4 又出现新的ERROR4.1 报错解释4.2 报错解决思路4.3 端口报错解决操作 集群下电停机后再次启动时&#xff0c;发现其中一台节点的worker启动失败。 1 检查失败节点worker启动日…...

Mysql的JDBC知识点

什么是JDBC JDBC(Java DataBase Connectivity) 称为Java数据库连接&#xff0c;它是一种用于数据库访问的应用程序API&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;有了JDBC就可以用统一的语法对多种关系数据库进行访问&#xff0c;而不用担心其数据库操作语…...

git的实际操作

文章目录 删除GitHub上的某个文件夹克隆仓库到另一个仓库 删除GitHub上的某个文件夹 克隆仓库到另一个仓库 从原地址克隆一份裸板仓库 –bare创建的克隆版本库都不包含工作区&#xff0c;直接就是版本库的内容&#xff0c;这样的版本库称为裸版本库 git clone --bare ****(原…...

数据结构零基础C语言版 严蔚敏-线性表、顺序表

二、顺序表和链表 1. 线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串...... 线性表在逻辑上是线性结构&#xff0c;…...

Keil uVision 5 MDK版软件安装包下载及安装教程(最详细图文教程)

目录 一.简介 二.安装步骤 软件&#xff1a;Keil uvision5版本&#xff1a;MDKv518语言&#xff1a;中文/英文大小&#xff1a;377.01M安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.59GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨64位下载链接…...

单目3D目标检测[基于深度辅助篇]

基于深度辅助的方法 1. Pseudo-LiDAR Pseudo-LiDAR from Visual Depth Estimation: Bridging the Gap in 3D Object Detection for Autonomous Driving康奈尔大学https://zhuanlan.zhihu.com/p/52803631 首先利用DRON或PSMNET从单目 (Monocular)或双目 (Stereo)图像获取对应的…...

Ubuntu20.04下安装MySQL8环境

Ubuntu20.04下安装MySQL8环境 1.下载MySQL客户端和服务器2.配置MySQL3.测试MySQL4.设置MySQL服务开机自启动5.修改root密码MySQL数据库基本使用启动MySQL数据库服务重启MySQL数据库服务停止MySQL数据库服务查看MySQL运行状态设置MySQL服务开机自启动停止MySQL服务开机自启动MyS…...

html鼠标悬停图片放大

要在HTML中实现鼠标悬停时图片放大的效果&#xff0c;你可以使用CSS和JavaScript来完成。下面是一个简单的示例&#xff1a; 首先&#xff0c;创建一个HTML文档&#xff0c;包含一张图片和相应的CSS和JavaScript代码。 <!DOCTYPE html> <html lang"en">…...

基于hugging face的autogptq量化实践

1.量化并保存到本地的 #导入库&#xff1a; from transformers import AutoModelForCausalLM, AutoTokenizer, GPTQConfig model_id "facebook/opt-125m"quantization_config GPTQConfig(bits4,group_size128,dataset"c4",desc_actFalse, )tokenizer A…...

MySQL2:MySQL中一条查询SQL是如何执行的?

MySQL2&#xff1a;MySQL中一条查询SQL是如何执行的&#xff1f; MySQL中一条查询SQL是如何执行的&#xff1f;1.连接怎么查看MySQL当前有多少个连接&#xff1f;思考&#xff1a;为什么连接数是查看线程&#xff1f;客户端的连接和服务端的线程有什么关系&#xff1f;MySQL参数…...

C++入门01—从hello word!开始

1.第一个C程序 1.1 创建项目 第一次使用Visual Studio时&#xff1a; 1.2 创建文件 1.3 编写代码 编写第一个代码&#xff1a; #include<iostream> using namespace std; int main() {cout << "hello word!" << endl;system("pause"…...

Mingw下载---运行vscodeC++文件

下载 下载网址&#xff1a; https://sourceforge.net/projects/mingw-w64/files/mingw-w64/mingw-w64-release/ 翻到最下面&#xff0c;选择win64的安装&#xff1a; 下载完&#xff0c;解压到没有空格和中文字符的路径。不然在vscode中运行不了C代码。...

数据安全与PostgreSQL:最佳保护策略

在当今数字化时代&#xff0c;数据安全成为了企业不可或缺的一环。特别是对于使用数据库管理系统&#xff08;DBMS&#xff09;的组织来说&#xff0c;确保数据的完整性、保密性和可用性至关重要。在众多DBMS中&#xff0c;PostgreSQL作为一个强大而灵活的开源数据库系统&#…...

火山引擎实时、低延时拥塞控制算法的优化实践

摘要 火山引擎智能拥塞控制算法 VICC&#xff08;Volcano Intelligent Congestion Control&#xff09;是一种自适应的拥塞控制算法&#xff0c;旨在解决全球不同网络环境下&#xff0c;不同音视频应用对带宽利用率和延时的差异化要求。它结合了传统拥塞控制算法&#xff08;如…...

adb设备调试常用命令

自从工作越来越忙后&#xff0c;越来越懒得写文章了&#xff0c;趁着1024程序员节&#xff0c;仪式性地写篇文章&#xff0c;分享一下最近调试设备经常用到的adb指令~ 1.查看应用内存占用 1.1 dumpsys meminfo package dumpsys是查看系统服务信息的一个常用指令&#xff0c;可…...

ubuntu下Docker的简单使用并利用主机显示

首先分享一个docker镜像的网站&#xff1a;https://hub.docker.com/search?q 这个网站里面有很多配置好的镜像&#xff0c;可以直接拉取。 下面介绍一下docker的安装和使用。 1、docker得到安装&#xff1a; sudo apt-get install docker 2、docker拉取一个镜像到本地,这里我…...

第12章 PyTorch图像分割代码框架-1

从本章开始&#xff0c;本书将会进行深度学习图像分割的实战阶段。PyTorch作为目前最为流行的一款深度学习计算框架&#xff0c;在计算机视觉和图像分割任务中已经广泛使用。本章将介绍基于PyTorch的深度学习图像分割代码框架&#xff0c;在总体框架的基础上&#xff0c;基于PA…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...