您当前的位置:首页 > 电脑百科 > 程序开发 > 架构

React使用百度地图实现驾车路线规划

时间:2022-03-22 11:00:06  来源:  作者:高道天

、创建基本地图

<Map 
    center={{ lng, lat }} 
    zoom="11" 
    style={{ height: '39vh'}} enableScrollWheelZoom ref={this.mapRef}
>
               
</Map>

2、实现驾车规划

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
    renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true}       
    });
driving.search(start, end);

3、计算驾车时间和距离

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
      renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true},
      onSearchComplete: (results: any) => {
        if (driving.getStatus() != BMAP_STATUS_SUCCESS){
            return ;
         }
          const plan = results.getPlan(0);
          this.setState({
            planTime: plan.getDuration(true), //获取时间
            planDistance: plan.getDistance(true) //获取距离
          })
      });
driving.search(start, end);

4、修改起点和终点图标

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
     renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true},
     onMarkersSet: (result: any) => {
          const startIcon = new BMapGL.Icon(carPng, new BMapGL.Size(69.6, 40));
          const endIcon = new BMapGL.Icon(hospitalPng, new BMapGL.Size(85, 59));
          result[0].marker.setIcon(startIcon);
          result[0].marker.setTitle(current?.vidId ?? '起点');
          result[result.length - 1].marker.setIcon(endIcon);
          result[result.length - 1].marker.setTitle(current?.orgName ?? '终点');
        }
     });
 driving.search(start, end);


Tags:React   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
从0实现React18
要从零开始实现React 18,需要理解React的核心概念和一些主要特性。以下是一个简要的步骤:1. 了解React的基本概念: 组件: React应用的基本构建块。组件可以是函数组件(Functional...【详细内容】
2024-01-22  Search: React  点击:(50)  评论:(0)  加入收藏
React的核心概念
React是一个开源JavaScript库,用于构建用户界面。它由Facebook开发并维护,已成为构建Web和移动应用程序的流行选择。React的主要特点是组件化架构,它使开发人员能够将应用程序...【详细内容】
2024-01-09  Search: React  点击:(110)  评论:(0)  加入收藏
浅析五种 React 组件设计模式
作为一名 React 开发者,你可能会面临下面几个问题: 如何构建一个高复用度性的组件,使其适应不同的业务场景? 如何构建一个具有简单 API的组件,使其易于使用? 如何构建一个在 UI 和...【详细内容】
2024-01-09  Search: React  点击:(92)  评论:(0)  加入收藏
React与Vue性能对比:两大前端框架的性能
React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。React的加载速度:初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM...【详细内容】
2024-01-05  Search: React  点击:(114)  评论:(0)  加入收藏
Vanilla Design,新一代 React UI 库
这几天做需求,一堆 UI 库实在是不知道选哪个,各种角色的同事争论不休;还总有新轮子冒出来,所以我来插一脚,并借此来领悟写代码的哲学:The best way to write secure and reliable...【详细内容】
2024-01-04  Search: React  点击:(94)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  Search: React  点击:(43)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  Search: React  点击:(76)  评论:(0)  加入收藏
使用React微前端的完整指南
译者 | 李睿审校 | 重楼事实表明,前端开发伴随着许多挑战。而寻找简化开发过程和加快任务执行的方法是每个开发团队的目标。在开发大型复杂产品时,让开发团队成员在任务上进行...【详细内容】
2023-12-26  Search: React  点击:(97)  评论:(0)  加入收藏
什么是React的错误边界(Error Boundary)?
React的错误边界(ErrorBoundary)是一种React组件,用于捕获并处理其子组件树中任何位置的JavaScript错误。它允许开发人员在应用程序中定义错误边界,以便在发生错误时显示备用UI...【详细内容】
2023-12-21  Search: React  点击:(127)  评论:(0)  加入收藏
如何设计更优雅的 React 组件?
在日常开发中,团队中每个人组织代码的方式不尽相同。下面我们就从代码结构的角度来看看如何组织一个更加优雅的 React 组件!1. 导入依赖项我们通常会在组件文件顶部导入组件所...【详细内容】
2023-12-21  Search: React  点击:(107)  评论:(0)  加入收藏
▌简易百科推荐
对于微服务架构监控应该遵守的原则
随着软件交付方式的变革,微服务架构的兴起使得软件开发变得更加快速和灵活。在这种情况下,监控系统成为了微服务控制系统的核心组成部分。随着软件的复杂性不断增加,了解系统的...【详细内容】
2024-04-03  步步运维步步坑    Tags:架构   点击:(7)  评论:(0)  加入收藏
大模型应用的 10 种架构模式
作者 | 曹洪伟在塑造新领域的过程中,我们往往依赖于一些经过实践验证的策略、方法和模式。这种观念对于软件工程领域的专业人士来说,已经司空见惯,设计模式已成为程序员们的重...【详细内容】
2024-03-27    InfoQ  Tags:架构模式   点击:(17)  评论:(0)  加入收藏
哈啰云原生架构落地实践
一、弹性伸缩技术实践1.全网容器化后一线研发的使用问题全网容器化后一线研发会面临一系列使用问题,包括时机、容量、效率和成本问题,弹性伸缩是云原生容器化后的必然技术选择...【详细内容】
2024-03-27  哈啰技术  微信公众号  Tags:架构   点击:(13)  评论:(0)  加入收藏
DDD 与 CQRS 才是黄金组合
在日常工作中,你是否也遇到过下面几种情况: 使用一个已有接口进行业务开发,上线后出现严重的性能问题,被老板当众质疑:“你为什么不使用缓存接口,这个接口全部走数据库,这怎么能扛...【详细内容】
2024-03-27  dbaplus社群    Tags:DDD   点击:(15)  评论:(0)  加入收藏
高并发架构设计(三大利器:缓存、限流和降级)
软件系统有三个追求:高性能、高并发、高可用,俗称三高。本篇讨论高并发,从高并发是什么到高并发应对的策略、缓存、限流、降级等。引言1.高并发背景互联网行业迅速发展,用户量剧...【详细内容】
2024-03-13    阿里云开发者  Tags:高并发   点击:(9)  评论:(0)  加入收藏
如何判断架构设计的优劣?
架构设计的基本准则是非常重要的,它们指导着我们如何构建可靠、可维护、可测试的系统。下面是这些准则的转换表达方式:简单即美(KISS):KISS原则的核心思想是保持简单。在设计系统...【详细内容】
2024-02-20  二进制跳动  微信公众号  Tags:架构设计   点击:(40)  评论:(0)  加入收藏
详解基于SpringBoot的WebSocket应用开发
在现代Web应用中,实时交互和数据推送的需求日益增长。WebSocket协议作为一种全双工通信协议,允许服务端与客户端之间建立持久性的连接,实现实时、双向的数据传输,极大地提升了用...【详细内容】
2024-01-30  ijunfu  今日头条  Tags:SpringBoot   点击:(21)  评论:(0)  加入收藏
PHP+Go 开发仿简书,实战高并发高可用微服务架构
来百度APP畅享高清图片//下栽のke:chaoxingit.com/2105/PHP和Go语言结合,可以开发出高效且稳定的仿简书应用。在实现高并发和高可用微服务架构时,我们可以采用一些关键技术。首...【详细内容】
2024-01-14  547蓝色星球    Tags:架构   点击:(122)  评论:(0)  加入收藏
GraalVM与Spring Boot 3.0:加速应用性能的完美融合
在2023年,SpringBoot3.0的发布标志着Spring框架对GraalVM的全面支持,这一支持是对Spring技术栈的重要补充。GraalVM是一个高性能的多语言虚拟机,它提供了Ahead-of-Time(AOT)编...【详细内容】
2024-01-11    王建立  Tags:Spring Boot   点击:(130)  评论:(0)  加入收藏
Spring Boot虚拟线程的性能还不如Webflux?
早上看到一篇关于Spring Boot虚拟线程和Webflux性能对比的文章,觉得还不错。内容较长,抓重点给大家介绍一下这篇文章的核心内容,方便大家快速阅读。测试场景作者采用了一个尽可...【详细内容】
2024-01-10  互联网架构小马哥    Tags:Spring Boot   点击:(129)  评论:(0)  加入收藏
站内最新
站内热门
站内头条