uniApp 加载google地图 并规划路线

uniApp 加载google地图 并规划路线

  • 备注:
  • 核心代码
  • 实例

备注:

打开谷歌地图失败的话 参考google开发文档

https://developers.google.com/maps/documentation/urls/ios-urlscheme?hl=zh-cn#swift

核心代码

mounted() {this.loadGoogleMapsScript();
},
methods: {//加载loadGoogleMapsScript() {const script = document.createElement('script');script.src ='https://maps.googleapis.com/maps/api/js?key=你自己的Key';script.async = true;script.defer = true;window.initMap = this.initMap; // 将 initMap 方法绑定到全局作用域document.head.appendChild(script);},//初始化initMap() {//获取当前的定位   经纬度navigator.geolocation.getCurrentPosition(position => {const {latitude,longitude} = position.coords;console.log("pos", position);const pos = {lat: latitude,lng: longitude};//加载到地图this.map = new google.maps.Map(document.getElementById('map'), {center: {lat: latitude,lng: longitude},zoom: 8,});// this.map = new google.maps.Map(document.getElementById('map'), {// 	center: {// 		lat: -34.397,// 		lng: 150.644// 	},// 	zoom: 8,// });// 设置起点和终点const start = new google.maps.LatLng(latitude, longitude);console.log(latitude, longitude);console.log(latitude + 1, longitude + 1);const end = new google.maps.LatLng(latitude + 1, longitude + 1);// 创建方向服务和方向渲染器实例const service = new google.maps.DirectionsService();const renderer = new google.maps.DirectionsRenderer({map: this.map});renderer.setMap(map);// 计算路径并在地图上显示service.route({origin: start,destination: end,travelMode: 'DRIVING', // 可选值:'DRIVING'(驾驶)、'WALKING'(步行)、'BICYCLING'(骑行)、'TRANSIT'(公共交通)}, (response, status) => {if (status === 'OK') {renderer.setDirections(response);} else {console.error('Directions request failed!');}});});},
},

实例

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LCD手机屏幕高精度贴合

LCD手机屏幕贴合,作为智能手机生产线上至关重要的一环,其质量直接关乎用户体验与产品竞争力。这一工艺不仅要求屏幕组件间的无缝对接,达到极致的视觉与触觉效果,还需确保在整个生产过程中,从材料准备到最终成品&#x…

深入理解与优化 Java JVM

一、引言 在 Java 开发中,Java 虚拟机(JVM)起着至关重要的作用。它负责将 Java 字节码转换为机器码并执行,同时管理着内存分配、垃圾回收等关键任务。理解和优化 JVM 对于提高 Java 应用程序的性能、稳定性和可扩展性至关重要。本…

不同类型的 LED 驱动电源在检测方法上有哪些不同?-纳米软件

1.传统 LED 驱动电源检测方法: 通常会提取 LED 驱动电源性能指标参数中较为重要的几个因子,如电压稳定性、电流波动范围等。利用诸如 k-means 聚类分析方法,实现对不同厂家、使用寿命不同的 LED 驱动电源快速有效的分类2。这种方法主要是通过…

海外媒体发稿:外媒宣发之《时代》杂志 TIME 的魅力

海外媒体发稿:外媒宣发之《时代》杂志 TIME 的魅力 海外媒体发稿:外媒宣发之《时代》杂志 TIME 在当今全球化的信息时代,媒体的影响力无远弗届。对于企业、组织和个人而言,能够在具有广泛影响力的世界媒体上发声,无疑…

Telegram机器人的手机部署

目的 一直有读 epub 电子书的习惯,摘录段落复制下来段落很难看,把自己写的排版器的逻辑复制下来,写成了一个排版机器人所有发给机器人的文字,都会经过排版,后转发到读书频道 前提 本来最好方法是直接把机器人架在服…

开源呼叫中心系统与商业软件的对比

开源呼叫中心系统与商业软件的对比 作者:FreeIPCC 在当今的商业环境中,呼叫中心系统已成为企业与客户之间沟通的重要桥梁。而在选择呼叫中心系统时,企业面临着两种主要的选择:开源呼叫中心系统和商业软件。这两种系统各有其独特的…

各数据表字段的数据类型与相关属性应该如何设计?分类列出并说明原因

在设计数据库表字段的数据类型与相关属性时,可以根据不同的数据类型进行分类。以下是常见的数据类型及其相关属性的分类和说明: 数值型数据 整型 (INT, BIGINT, SMALLINT, TINYINT) 用途: 存储整数值。 原因: 整型适合存储计数、ID等不需要小数的数值&…

面试中的一个基本问题:如何在数据库中存储密码?

面试中的一个基本问题:如何在数据库中存储密码? 在安全面试中,“如何在数据库中存储密码?”是一个基础问题,但反映了应聘者对安全最佳实践的理解。以下是安全存储密码的最佳实践概述。 了解风险 存储密码必须安全&am…

【Java小白图文教程】-05-数组和排序算法详解

精品专题: 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…

less和sass基本使用

变量 变量在LESS和SASS中都以符号定义,可以在全局范围内使用,也可以在局部范围内定义和使用。 LESS示例: primary-color: #3498db; padding: 15px;.article {background-color: primary-color;padding: padding; }SASS示例: $…

day02|计算机网络重难点之HTTP请求报文和响应报文

day02|计算机网络重难点之HTTP请求报文和响应报文 3.HTTP请求报文和响应报文是怎样的,有哪些常见的字段? 3.HTTP请求报文和响应报文是怎样的,有哪些常见的字段? HTTP请求报文主要是由 请求行、请求头部、空行和请求体 四部分组成…

电商平台店铺运营:巧用 API 接口的策略之道

一、商品管理策略 实时库存同步 通过 API 接口,将店铺的库存管理系统与电商平台连接起来,实现实时库存同步。这样可以避免超卖现象的发生,提高顾客满意度。当库存发生变化时,系统自动更新平台上的库存数量,确保信息的准…

Redis 发布订阅 总结

前言 相关系列 《Redis & 目录》(持续更新)《Redis & 发布订阅 & 源码》(学习过程/多有漏误/仅作参考/不再更新)《Redis & 发布订阅 & 总结》(学习总结/最新最准/持续更新)《Redis &a…

ChatGPT的科研写作能力提升专题

在当今信息爆炸的时代,科研工作者不仅需要在各自的领域中产生高质量的研究成果,还需要面对大量文献阅读、写作和发表任务。为了应对这些挑战,越来越多的科研人员开始借助人工智能(AI)工具,而GPT&#xff08…

简单工厂(Simple Factory)

简单工厂(Simple Factory) 在创建一个对象时不向客户暴露内部细节,并提供一个创建对象的通用接口。 说明: 简单工厂把实例化的操作单独放到一个类中,这个类就成为简单工厂类,让简单工厂类来决定应该用哪…

supermall项目上拉加载bug分析

1.bug分析 bug出现的过程是这样的:better-scroll框架会计算滚动内容的高度(通过BScroll对象的scrollerHeight属性记录滚动内容的高度) 由于内容中的图片资源还未加载成功 就已经完成计算 导致计算结果错误 而计算之后 图片资源随之加载完成 这时候better-scroll框架…

《Python游戏编程入门》注-第2章2

《Python游戏编程入门》的“2.2.5 绘制线条”中提到了通过pygame库绘制线条的方法。 1 相关函数介绍 通过pygame.draw模块中的line()函数来绘制线条,该函数的格式如下所示。 line(surface, color, start_pos, end_pos, width1) -> Rect 其中,第一…

Go 语言中的 GOMAXPROCS

在 Go 语言中,GOMAXPROCS 是一个非常重要的设置,它决定了程序中可以同时运行的 goroutines 的数量。默认情况下,GOMAXPROCS 的值与机器的 CPU 核心数相同,这样可以充分利用多核 CPU 的并发处理能力。但是,在某些环境下…

UnityShader——基础篇之学习Shader所需的数学基础——下

裁剪空间 顶点接下来要从观察空间转换到裁剪空间(也被称为齐次裁剪空间) 中,这个用于变换的矩阵叫做裁剪矩阵,也被称为投影矩阵 裁剪空间的目标是能够方便地对渲染图元进行裁剪:完全位于这块空间内部的图元将会被保留&…

[deadlock]死锁导致的设备登录无响应问题

[deadlock]死锁导致的设备登录无响应问题 一、问题现象二、初步观察三、继续深挖查看netlink相关信息查看warnd进程栈 四、再接再厉查看warnd 用户栈 后记 一、问题现象 实验室一台压力测试设备突然无法登录,无论web页面,ssh或者telnet登录,…