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

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

开发国外软件的时候,想使用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.lryc.cn/news/466368.html

相关文章:

  • UE4 材质学习笔记12(水体反射和折射)
  • Go:error处理机制和函数
  • 智能指针(3)
  • spring源码拓展点3之addBeanPostProcesser
  • 【计网】理解TCP全连接队列与tcpdump抓包
  • react18中实现简易增删改查useReducer搭配useContext的高级用法
  • 排序算法 —— 冒泡排序
  • QT--文本框 QLineEdit、qtextedit
  • Qt编写的modbus模拟器/支持网络和串口以及websocket/支持网络rtu
  • Standard_Matrix
  • js 通过input,怎么把选择的txt文件转为base64格式
  • 华为HCIP-openEuler认证详解
  • YOLO11改进 | 注意力机制 | 添加双重注意力机制 DoubleAttention【附代码+小白必备】
  • sentinel原理源码分析系列(四)-ContextEntry
  • Tcp协议讲解与守护进程
  • 学习threejs,THREE.LineDashedMaterial 虚线材质,基于gosper高斯帕曲线生成雪花动画
  • LeetCode 热题100之哈希
  • 软工——模块设计(爱啦爱啦)
  • Xmind一款极简思维导图和头脑风暴软件,支持PC和移动端,Xmind 2024.10.01101版本如何升级到Pro版?简单操作,最新可用!
  • 自动化工具:Ansible
  • 我是类(最终版)
  • 详解ip route
  • OpenGL进阶系列04 - OpenGL 点精灵
  • VSCode按ctrl与鼠标左键无法实现跳转的解决办法
  • U盘数据丢失不用慌,这4个工具可以帮你恢复。
  • 如何在Ubuntu上挂载一块硬盘:详解方案与实操步骤【小白无坑版】
  • 【JAVA】第三张_Eclipse下载、安装、汉化
  • go-zero系列-限流(并发控制)及hey压测
  • Electron-(三)网页报错处理与请求监听
  • 银河麒麟(debian)下安装postgresql、postgis