前端页面使用google地图api实现导航功能,开发国外网站免费简单好用

ops/2024/10/19 14:12:39/

开发国外软件的时候,想使用goole map实现导航等功能,可以使用google的api来做,官方文档地址:https://developers.google.com/maps/documentation/urls/get-started?hl=zh-cn ,比如:

支持的请求的操作:

  • 搜索 - 启动会显示特定地点图钉的 Google 地图,或执行常规搜索并启动地图以显示结果:
    https://www.google.com/maps/search/?api=1&parameters
  • 路线 - 请求路线并启动 Google 地图并显示以下结果:
    https://www.google.com/maps/dir/?api=1&parameters
  • 显示地图 - 启动 Google 地图时不显示标记或路线:
    https://www.google.com/maps/@?api=1&map_action=map&parameters
  • 显示街景全景图片 - 启动互动式全景图片:
    https://www.google.com/maps/@?api=1&map_action=pano&parameters

重要提示:参数 api=1 用于标识此网址所对应地图网址的版本。每个请求中都需要包含此参数。唯一的有效值为 1。如果网址中包含 api=1,则系统会忽略所有参数,并将在浏览器或 Google 地图移动应用中启动默认的 Google 地图应用,具体取决于所使用的平台(例如 https://www.google.com/maps)。

只需要将地址和出发点信息拼接到url地址中就可以了:

记得地址信息要进行url编码,编码方式:

encodeURIComponent 和 decodeURIComponent(推荐使用)

它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。
因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。

测试的例子代码:

    const destination = '中国上海市浦东新区凯庆路299号'const params = encodeURIComponent(destination)var win = window.open(`https://www.google.com/maps/dir/?api=1&destination=${params}`,'_blank')


http://www.ppmy.cn/ops/126739.html

相关文章

【Java语言】逻辑控制

在Java中控制条件的语句几乎都是布尔表达式(只有true和false),与C语言不一样。 顺序控制 按照一定的顺序排序(事先准备好的);eg:阿拉伯数字是按顺序的等等 分支结构 if语句 if后面的表达式必…

【Vue】--项目文件结构

以下是一个基本的Vue项目结构框架: vue-project/ │ ├── node_modules/ # 项目依赖模块 │ ├── public/ # 静态资源目录 │ ├── favicon.ico # 网站图标 │ └── index.html # 入口 …

UniApp入门教程

UniApp X 是一种用于构建跨平台应用程序的框架,它基于 Vue.js 并通过 UniApp 技术栈支持多种平台,如微信小程序、支付宝小程序、H5、Android 和 iOS。以下是 UniApp X 的一些关键特点和基础知识: UniApp X 的特点 跨平台支持: 可…

Leetcode 1135. 最低成本连通所有城市

1.题目基本信息 1.1.题目描述 想象一下你是个城市基建规划者,地图上有 n 座城市,它们按以 1 到 n 的次序编号。 给你整数 n 和一个数组 conections,其中 connections[i] [x_i, y_i, cost_i] 表示将城市 x_i 和城市 y_i 连接所要的cost_i&…

Python--spi.quad学习笔记

spi.quad 是 SciPy 库中用于数值积分的函数,特别是进行一维积分。其全称为 “quadrature”,即 “数值积分”。 result, error spi.quad(func, a, b, args(), epsabs1.49e-8, epsrel1.49e-8)参数说明 func: 要积分的函数。这是一个可调用对象&#xff0…

MySQL数据库从入门到精通 第2讲 启动 停止 连接

MySQL数据库从入门到精通 第2讲 启动 停止 连接 MySQL数据库的初步使用 在上一小节我们已经简单了解了数据库与一些相关概念 接下来我们来学习下如何使用一下MySQL 1 MySQL的启动 MySQL服务是随着电脑开机自动启动的,在windows中MySQL的服务名称默认就是MySQL8…

6、ES6

文章目录 一.关于ES6二.关于变量声明let声明变量const 声明常量 三.变量的解构赋值四.字符串的扩展五.函数的扩展函数默认参数rest参数箭头函数(函数的新写法) 六.数组的扩展七.对象的扩展语法上的简化对象的解构赋值 八.Symbol:新的数据类型(类似于字符串)独一无二…

学习 ES6 生成器 ( Generator ) :掌握优雅的异步编程利器

一. 引言 在软件开发中,异步编程是一个常见的需求。异步编程允许程序在执行等待耗时操作时不被阻塞,而是继续执行其他任务,提高程序的响应性和性能。然而,传统的异步编程方式(如回调函数和事件监听)往往会…