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

高德Map

使用

官网:JS API 结合Vue使用

npm i @amap/amap-jsapi-loader --saveimport AMapLoader from '@amap/amap-jsapi-loader';

marker的属性、事件、方法

https://lbs.amap.com/api/javascript-api-v2/documentation#marker

自定义marker

  1. 为创建的 Marker 指定自定义图标 URL
  2. 创建的 Marker 指定 Icon 实例
  3. 为创建的 Marker 指定自定义内容
const map = new AMap.Map('container',{zoom: 10,  //设置地图显示的缩放级别center: [116.397428, 39.90923],  //设置地图中心点坐标mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式viewMode: '2D'  //设置地图模式
});
// 创建 AMap.Icon 实例:
const icon = new AMap.Icon({size: new AMap.Size(40, 50),    // 图标尺寸image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量,适于雪碧图等imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});// 将 Icon 实例添加到 marker 上:
const marker = new AMap.Marker({position: new AMap.LngLat(116.405467, 39.907761),offset: new AMap.Pixel(-10, -10),icon: icon, // 添加 Icon 实例title: '北京',zoom: 13
});map.add(marker);
const content = '<div class="marker-route marker-marker-bus-from"></div>';const marker = new AMap.Marker({content: content,  // 自定义点标记覆盖物内容position:  [116.397428, 39.90923], // 基点位置offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
});map.add(marker);

https://lbs.amap.com/api/javascript-api-v2/guide/amap-marker/custom-marker

信息窗体 InfoWindow

地图模糊搜索

https://lbs.amap.com/demo/javascript-api-v2/example/poi-search/search-after-enter-prompt
官网:

    //输入提示var autoOptions = {input: "tipinput"};AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){var auto = new AMap.AutoComplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map});  //构造地点查询类auto.on("select", select);//注册监听,当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询}});

自己写一个:

// 输入提示
let autocomplete = new AMap.AutoComplete({input: document.getElementById('tipinput')
})/**** 提示的select事件:*/
autocomplete.on('select', (e) => {console.log('select-e:', e)// console.log(e.poi.location) // 获取选中的的地址的经纬度// placeSearch.search(e.poi.name)/**** 选择select下拉,跳转到具体位置:* 1.‘北京市’等字段选择的时候,没有经纬度,所以使用了setCity去跳转到某个城市* 2.详细地市搜索的时候,是有location信息的,可以直接使用setCenter方法*/if (e.poi.location) {this.map.setCenter(e.poi.location)} else {this.map.setCity(e.poi.name)}
})

地理编码(address-> 经纬度)和逆地理编码(经纬度->address)

https://lbs.amap.com/demo/javascript-api-v2/example/geocoder/geocoding
https://lbs.amap.com/demo/javascript-api-v2/example/geocoder/regeocoding

 var geocoder = new AMap.Geocoder({city: "010", //城市设为北京,默认:“全国”radius: 1000 //范围,默认:500});geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete'&&result.regeocode) {var address = result.regeocode.formattedAddress;document.getElementById('address').value = address;}else{log.error('根据经纬度查询地址失败')}});

相关文章:

高德Map

使用 官网&#xff1a;JS API 结合Vue使用 npm i amap/amap-jsapi-loader --saveimport AMapLoader from amap/amap-jsapi-loader;marker的属性、事件、方法 https://lbs.amap.com/api/javascript-api-v2/documentation#marker 自定义marker 为创建的 Marker 指定自定义图…...

SSM新闻发布管理系统

SSM毕设分享 序号1&#xff1a;SSM新闻发布管理系统 1 项目简介 Hi&#xff0c;各位同学好&#xff0c;这里是郑师兄&#xff01; 今天向大家分享一个毕业设计项目作品【SSM新闻发布管理系统】 师兄根据实现的难度和等级对项目进行评分(最低0分&#xff0c;满分5分) 难度系数…...

客户销售目标拆解:数据驱动的方法和策略

写在开头 在当今竞争激烈的商业环境中,企业需要更加精准地制定销售目标以实现业务增长。数据驱动的方法在这一过程中扮演着关键的角色,帮助企业深入了解客户特征、行为和需求。本篇博客将深入探讨销售目标拆解在企业管理中的重要性,并介绍如何利用数据驱动的方法和策略来制…...

“丝路电商”与泛欧在线公共采购平台Peppol

近期上海商务委员会公布《关于在上海市创建“丝路电商”合作先行区的方案》&#xff08;以下简称方案&#xff09;&#xff0c;方案中提出&#xff1a;“全面贯彻落实党的二十大精神&#xff0c;立足新发展阶段&#xff0c;完整、准确、全面贯彻新发展理念&#xff0c;加快构建…...

今日思考 -- 创新领导力(CIO)读后感

收获3个观点&#xff1a; 1 &#xff0c;IT DT 商业&#xff0c;才是未来IT人的出路之一 &#xff01; 2 &#xff0c;在CXO中&#xff0c;CIO像CEO一样&#xff0c;具备了整个企业的业务全视角 &#xff0c;同时也更具解决 ‘’系统性‘’问题的能力 &#xff01; 3 &…...

Python实现Excel自动化

个人网站 文章首发于公众号&#xff1a;小肖学数据分析 Excel是办公自动化的关键工具之一&#xff0c;用于数据存储、处理和分析。 Python通过 openpyxl 库&#xff0c;提供了强大的Excel操作能力&#xff0c;让我们可以读取、写入、修改和创建复杂的Excel文件。 安装 open…...

WT2605-24SS高品质录音语音芯片:实现五种变音效果,为音频应用增添无限创意

在音频技术的世界里&#xff0c;录音芯片作为声音处理和传输的核心部件&#xff0c;一直以来都承载着人们对高品质音频的追求。而唯创知音推出的WT2605-24SS高品质录音语音芯片则在此基础上更进一步&#xff0c;带来了五种独特的变音效果&#xff0c;为音频应用注入了无限的创意…...

最美早安心语问候朋友们,祝你心情美好,万事如意

1、真诚的友谊&#xff0c;不会忘记&#xff0c;永远的朋友&#xff0c;每天想起。生活就是大海&#xff0c;朋友就是浪花&#xff0c;大海因有了浪花而美丽&#xff0c;生活有了朋友而甜蜜&#xff1b;祝福依旧&#xff0c;问候依然&#xff0c;祝朋友们开心快乐每一天……大家…...

2312skia,16画布

创建SkCanvas 首先,阅读SkCanvasAPI概述. Skia有多个接收SkCanvas绘图命令的后端.每个后端都有创建SkCanvas的独特方式.本页给出了每个示例: 光栅化 光栅化后端将绘画到可由Skia或客户管理的内存块. 推荐用管理画布命令要绘画内存对象的SkSurface为Raster和Ganesh后端创建画…...

mysql文本类型的最大长度限制

mysql支持很多类型&#xff0c;不同的文本有不同的长度限制。可以根据实际需要进行选择。 TINYBLOB, TINYTEXT L 1 bytes, where L < 2^8 (255 Bytes) BLOB, TEXT L 2 bytes, where L < 2^16 (64 Kilobytes) MEDIUMBLOB, MEDIUMTEXT L 3 b…...

ASP.NET《数据库原理及应用技术》课程指导平台的开发

1.1 系统设计目标 研制《数据库原理及应用技术》课程指导平台在功能上可以满足网络课堂教学活动的需要&#xff0c;在Internet上实现教学活动的各个环节。系统的基本设计原则有&#xff1a;先进性与方便性原则、功能实用性原则、开放性与可扩展性原则等。系统设计时采用较好的…...

OSHI-操作系统和硬件信息库

文章目录 引言一、快速入门1.1 OSHI的简介1.2 引入依赖1.3 涉及的包&#xff08;package&#xff09;1.4 涉及的核心类 二、操作系统信息&#xff1a;OperatingSystem2.1 总揽2.2 文件系统信息&#xff1a;FileSystem2.3 网络参数信息&#xff1a;NetworkParams2.4 进程信息&am…...

基于Java SSM框架+Vue实现企业公寓后勤管理系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架Vue实现企业宿舍后勤管理网站演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所…...

stm32mp157和imx6ull在设备树节点上设置ap3216c的主要区别

stm32mp157和imx6ull在设备树节点上设置ap3216c的主要区别是&#xff0c;它们使用的不同的硬件架构和不同的设备树格式。以下是两者之间的差异&#xff1a; 硬件架构&#xff1a;stm32mp157是基于ARM Cortex-M4内核的微控制器&#xff0c;而imx6ull则是基于ARM Cortex-A7内核的…...

网工学习6-配置和管理 VLAN

6.1VLAN概念 1> 什么是 VLAN&#xff1f; VLAN 是一种在交换机上划分逻辑网段的二层技术。 2> 为什么要通过交换机划分网段&#xff1f; ① 因为交换机的端口密度比路由器高&#xff0c;并且价格比路由器低&#xff0c;所以组网成本更低。 ② 因为交换机划分网段比…...

MySQL库与表的备份

库的备份 备份 语法 mysqldump -P3306 -u root -p 密码 -B 数据库名 > 数据库备份存储的文件路径 例 mysqldump -P3306 -u root -p123456 -B mytest > D:/mytest.sql 注意 这是在linux命令行下。 还原 语法 scource 数据库文件路径 例 source D:/mysql-5.7.22/mytest.s…...

Python核心编程之基础内功

目录 一、语句和语法 1、 注释( # ) 2、继续( \ ) 3、多个语句构成代码组(:):...

GPT4-Turbo技术原理研发现状及未来应用潜力分析报告

今天分享的是GPT4-Turb系列深度研究报告&#xff1a;《GPT4-Turbo技术原理研发现状及未来应用潜力分析报告》。 &#xff08;报告出品方&#xff1a;深度行业分析研究&#xff09; 报告共计&#xff1a;46页 图像理解能力提升&#xff1a;三大视觉学习方法  为打造视觉大模…...

为什么 SQL 不适合图数据库

背景 “为什么你们的图形产品不支持 SQL 或类似 SQL 的查询语言&#xff1f;” 过去&#xff0c;我们的一些客户经常问这个问题&#xff0c;但随着时间的推移&#xff0c;这个问题变得越来越少。 尽管一度被忽视&#xff0c;但图数据库拥有无缝设计并适应其底层数据结构的查询…...

【Rust日报】2023-12-02 深度学习框架 Burn 发布 v0.11.0

深度学习框架 Burn 发布 v0.11.0 深度学习框架 Burn 发布 v0.11.0&#xff0c;新版本引入了自动内核融合&#xff08;Kernel Fusion&#xff09;功能&#xff0c;大大提升了访存密集型&#xff08;memory-bound&#xff09;操作的性能。同时宣布成立 Tracel AI (https://tracel…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...