跨平台使用高德地图服务

高德地图-初始化

目标:注册高德地图开放平台并初始化地图

步骤:

  • 准备工作 准备-地图 JS API 2.0 | 高德地图API
  • Vue中使用 JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API

参考文档

  • Web开发-JSAPI文档

流程:

  1. 注册&认证个人开发者===>创建web应用====>得到 key 和 jscode
  • key 7ad7e9d1784a9905562e90c73c679503
  • jscode ae504add6495e6e5f6aa3ae5ef3f4a6d
  1. 在vue3项目中使用

代码:

1.按 NPM 方式使用 Loader,安装

pnpm i @amap/amap-jsapi-loader

 2.配置安全密钥 securityJsCode

medicine/OrderExpress.vue

// v2.0 需要配置安全密钥jscode
window._AMapSecurityConfig = {securityJsCode: ' '//加入密钥
}

 3.扩展 Window 的类型

types/global.d.ts

interface Window {_AMapSecurityConfig: {securityJsCode: string}
}

 4.组件初始化的时候:加载高德地图需要的资源

Medicine/OrderExpress.vue

import AMapLoader from '@amap/amap-jsapi-loader'onMounted(async () => {// ... 省略 ...AMapLoader.load({key: '7ad7e9d1784a9905562e90c73c679503',version: '2.0'}).then((AMap) => {// 使用 Amap 初始化地图})
})

 5.初始化地图,参考demo示例

const app = new AMap.Map("map",{ //设置地图容器idzoom:12, //初始化地图级别mapStyle: 'amap://styles/whitesmoke' // 设置地图样式
});<view id="map">...</view>

高德地图-物流轨迹

实现:使用高德地图api绘制物流轨迹

步骤:

  • 绘制轨迹
  • 绘制起点和终点位置

代码:

  1. 根据 参考示例-使用经纬度获取驾车规划数据,获取路线规划方案

说明❓:通过插件引入

AMap.plugin('AMap.Driving', () => {const driving = new AMap.Driving({map: map, // 指定轨迹显示地图实例showTraffic: false // 关闭交通状态})// 开始位置坐标const startLngLat = [116.379028, 39.865042]// 结束位置坐标const endLngLat = [116.427281, 39.903719]driving.search(startLngLat, endLngLat, function (status: string, result: object) {// 未出错时,result即是对应的路线规划方案})
})

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

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

相关文章

GitHub | 发布到GitHub仓库并联文件夹的方式

推送到Github 推送步骤如果你只想更新单个文件&#xff0c;只需在第 4 步中指定该文件的路径即可。可能问题一 效果 推送步骤 更新 GitHub 仓库中的文件通常涉及以下步骤&#xff1a; 克隆仓库&#xff1a; 首先&#xff0c;你需要将 GitHub 上的仓库克隆到本地。使用 git …

Docsify文档编辑器:Windows系统下个人博客的快速搭建与发布公网可访问

文章目录 前言1. 本地部署Docsify2. 使用Docsify搭建个人博客3. 安装Cpolar内网穿透工具4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows环境本地部署 Docsify 这款以 markdown 为中心的文档编辑器&#xff0c;并即时生成您的文档博客网站&#xff0c;结合…

杂货 | 每日资讯 | 2024.11.1

注意&#xff1a;以下内容皆为AI总结 2024年11月1日&#xff0c;人工智能&#xff08;AI&#xff09;领域发生了多项重要事件&#xff0c;标志着技术发展的新阶段。本文将详细探讨以下三大事件&#xff1a; OpenAI为ChatGPT新增搜索功能IEEE发布《2025年及以后的技术影响》报…

RuoYi 样例框架运行步骤(测试项目自用,同学可自取)

目录 后台 API 运行导入&#xff0c;下载包端口号mysql 准备运行 PC&#xff08;电脑端&#xff09;运行安装 nodejs安装 yarn 及其依赖&#xff0c;启动服务登录admin(admin123) 或 ry(admin123) App&#xff08;移动&#xff09;运行下载 HBuilderX运行app运行注意&#xff1…

Puppeteer点击系统:解锁百度流量点击率提升的解决案例

在数字营销领域&#xff0c;流量和搜索引擎优化&#xff08;SEO&#xff09;是提升网站可见性的关键。我开发了一个基于Puppeteer的点击系统&#xff0c;旨在自动化地提升百度流量点击率。本文将介绍这个系统如何通过模拟真实用户行为&#xff0c;优化关键词排名&#xff0c;并…

项目解决方案:跨不同的物理网络实现视频监控多画面的实时视频的顺畅访问

目录 一、碰到的需求问题 二、需求分析 三、方案分析 &#xff08;一&#xff09;方法1&#xff1a;使用HTTP代理 1. 安装HTTP代理服务器 2. 配置Nginx代理 3. 重启Nginx 4. 访问视频流 &#xff08;二&#xff09;方法2&#xff1a;使用反向代理 1. 安装反向代理服务…

MQTT自动发送消息工具(自动化测试MQTT)

点击下载《MQTT客户端服务端工具》 点击下载《MQTT自动发送消息软件(自动化测试MQTT)》 1. 前言 在软件开发过程中&#xff0c;MQTT常被用作消息队列来完成特定的业务功能。当我们将相关业务代码编写完成后&#xff0c;通常需要编写额外的消息生产和消费代码来模拟消息高峰时…

东北虎豹国家公园shp格式范围

东北虎豹国家公园地处中国吉林、黑龙江两省交界的老爷岭南部&#xff08;珲春—汪清—东宁—绥阳&#xff09;区域&#xff0c;东起吉林省珲春林业局青龙台林场&#xff0c;与俄罗斯滨海边疆区接壤&#xff0c;西至吉林省大兴沟林业局岭东林场&#xff0c;南自吉林省珲春林业局…

练习LabVIEW第三十七题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第三十七题&#xff1a; 利用XY GRAPH 构成李萨如图形 开始编写&#xff1a; 前面板放一个XY图控件&#xff0c;程序框图…

Pandas 数据可视化指南:从散点图到面积图的全面展示

Pandas 数据可视化指南&#xff1a;从散点图到面积图的全面展示 本文介绍了使用 Pandas 进行数据可视化的多种方法&#xff0c;包括散点图、折线图、条形图、直方图、饼图和面积图等&#xff0c;涵盖了常见的图表类型及其实现方式。通过提供详细的代码示例&#xff0c;展示了如…

Solana链上的Pump狙击机器人与跟单机器人的工作原理及盈利模式

随着加密货币市场的快速发展&#xff0c;越来越多的投资者和开发者开始关注Solana链上的自动化交易工具。尤其是Pump狙击机器人和跟单机器人&#xff0c;这两种工具为用户提供了在市场波动中获取利润的机会。本文将深入分析这两种机器人的工作原理及其盈利模式。 一、Pump狙击机…

嵌入式操作系统FreeRTOS

系列文章目录 嵌入式操作系统FreeRTOS 嵌入式操作系统FreeRTOS 系列文章目录一、FreeRTOS 一、FreeRTOS 首先看一下 FreeRTOS 的名字&#xff0c;可以分为两部分&#xff1a;“Free”和“RTOS”&#xff0c;“Free”就是免费的、自由的、不受约束的意思&#xff0c;“RTOS”全…

客如云:大型业务报表的分区化改造提升性能|OceanBase 应用实践

一 概述 1 背景 在过去两到三年的时间里&#xff0c;客如云的KPOS产品在商户数量和订单量均实现了数倍的增长&#xff0c;充分展示了产品的市场吸引力和业务模式的成功。然而&#xff0c;随着更多的大型连锁商户的加入&#xff0c;客如云商家平台迎来了前所未有的挑战。特别是…

Vue2指令原理手写

文件结构 index.js /** Author: RealRoad* Date: 2024-10-31 17:13:50* LastEditors: Do not edit* LastEditTime: 2024-10-31 17:15:57* Description: * FilePath: \project_10_08\vite-project\src\testVue\index.js*/ import Vue from ./Vue.js window.VueVue Vue.js imp…

手游和应用出海资讯:可灵AI独立APP即将上架;Rollic在英国推出芭比合并解谜手游

NetMarvel帮助游戏和应用广告主洞察全球市场、获取行业信息&#xff0c;以下为10月第四周资讯&#xff1a; ● 苹果开发全新游戏中心应用 ● Meta计划开发人工智能搜索引擎 ● 微软已拥有20个游戏IP&#xff0c;收入达10亿美元 ● OpenAI计划在12月推出其下一代前沿模型Orion ●…

笔记-利率学习记录

利率、通货膨胀与经济运行 利率政策的经济效应 假设所有利率一样&#xff0c;把利率降到 0 会带来一系列影响&#xff1a; 降低储蓄意愿&#xff1a;随着利率接近于 0&#xff0c;人们存钱的收益减少&#xff0c;倾向于消费和投资。增加企业盈利&#xff1a;融资成本降低&…

九,数据类型存储

1、简单类型与复杂类型 简单类型又叫做基本数据类型或者值类型&#xff0c;复杂类型又叫做引用类型 值类型&#xff1a;简单数据类型/基本数据类型&#xff0c;在存储时变量中存储的时值本身&#xff0c;因此叫做值类型 string、number、boolean、undefined、null 注意&…

电通旗下VeryStar连摘Campaign 亚太科技MVP及鼎革奖两项大奖

近日&#xff0c;电通CXM&#xff08;客户体验管理&#xff09;旗下费芮互动VeryStar开发的OmniRetail零售数字化平台及其中的OmniCRM分别摘得重磅奖项。OmniCRM在Campaign亚太2024年度亚太地区Tech MVP中当选“最有价值科技产品”&#xff0c;OmniRetail荣获“2024「鼎革奖」数…

[ 应急响应靶场实战 ] VMware 搭建win server 2012应急响应靶机 攻击者获取服务器权限上传恶意病毒 防守方人员应急响应并溯源

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础

在应用开发中&#xff0c;动画效果可以增强用户体验。鸿蒙框架提供了 translate、scale 和 rotate 等动画功能&#xff0c;允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。 关键词 Animation 组件动画效果位置动画自动动画缩放动画 一…