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

WEB使用百度地图展示某地地址

news 2026/4/2 13:20:23

第一步 进入百度地图开发平台 

百度地图开放平台 | 百度地图API SDK | 地图开发

 第二步注册 获取AK秘钥，点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问

 下面的这个就是AK秘钥

第三步 就是在HTML文件中创建一个div元素，用于显示地图。

第四步 在JS文件中编写代码，调用百度地图API的相关函数，实现地图的展示和标注。

下面这个就是在页面中引用申请的秘钥

    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

 效果图

页面代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>获取信息窗口内容</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
</head><body><div id="Map" style="width: 600px;height: 500px;"></div>
</body></html>
<script>var map = new BMapGL.Map('Map');// 创建Map实例var point = new BMapGL.Point(116.404, 39.915); // 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(point, 15);var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件map.addControl(zoomCtrl);// 创建点标记var marker = new BMapGL.Marker(point);map.addOverlay(marker);// 创建信息窗口var opts = {width: 200,height: 100,title: '故宫博物院'};var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);map.openInfoWindow(infoWindow, point); // 开启信息窗口function getInfoContent() {alert(infoWindow.getContent());}var map = new AMap.Map('allmap', {zoom: 14,zoomEnable: true,scrollWheel: false,center: [113.360435, 23.101970],lang: "zh_cn" //可选值：en，zh_en, zh_cn});</script>

百度地图 地址经纬度拾取地址如下链接:

拾取坐标系统

相关文章：

WEB使用百度地图展示某地地址

第一步 进入百度地图开发平台 百度地图开放平台 | 百度地图API SDK | 地图开发 第二步注册 获取AK秘钥&#xff0c;点击【创建应用】进入AK申请页面&#xff0c;填写应用名称&#xff0c;务必选择AK类型为“浏览器端”&#xff0c;JS API只支持浏览器端AK进行请求与访问 下面…...

编程日记 2023/10/27 16:01:56

22年上半年下午题

第一大题题目 第一大题解答 第一小问 看加工交互和说明来得出实体的名字。如果不太确定&#xff0c;可以多去看几条数据流来确认答案。仔细一点&#xff0c;这分稳啦。 第二小问 需要对应加工结合说明得出数据存储的名称。 一般可以在后面加上表字或者加上信息表。自拟&…...

编程日记 2023/10/27 16:00:55

大文件分片上传-续传-秒传（详解）

前言 前面记录过使用库实现的大文件的分片上传 基于WebUploader实现大文件分片上传 基于vue-simple-uploader 实现大文件分片上传 前面记录过基于库实现的大文件的分片上传&#xff0c;那如果不使用库&#xff0c; 文件分片是怎么实现的&#xff0c;该怎么做到呢&#xff1f;…...

编程日记 2023/10/27 15:58:53

CE-LVD证书跟CE-EMC证书有什么区别？

CE-LVD证书跟CE-EMC证书有什么区别&#xff1f; CE-LVD证书跟CE-EMC证书有什么区别&#xff1f; 近日&#xff0c;TEMU平台电器需提交CE-LVD证书&#xff0c;不再接受EMC证书---玩具产品需提交满足玩具法规的CE证书&#xff0c;法规总是多变的&#xff0c;卖家也是很苦恼&…...

编程日记 2023/10/27 15:56:50

使用Mapster实现双向映射，解放搬砖体力活

经常会有对象属性互相赋值的操作&#xff0c;但是频繁的写实在是搬运工一样&#xff0c;比较难受比如下面两个类 public class AgencyBdm {public new int Id { set; get; }public string AgencyId { set; get; }public string AgencyName { set; get; }public string Region {…...

编程日记 2023/10/27 15:55:49

一种基于屏幕分辨率的RTSP主子码流切换的多路视频监控的播放方案

技术背景&#xff1a; 用户场景下&#xff0c;存在多个监控场所的100路监控摄像头&#xff0c;例如&#xff1a;大华、海康、宇视、杭州宇泛的枪机、球机、半球、NVR、DVR等不同类型的监控设备&#xff0c;通过视频监控平台进行设备的管理&#xff0c;通过RTSP拉流的方案管理监…...

编程日记 2023/10/27 15:54:48

SpringBoot日志+SpringMVC+UUID重命名文件+Idea热部署

目录 【SpringBoot日志】 什么是日志&#xff0c;日志的作用 关于日志的基本信息&#xff0c;又有哪些呢&#xff1f; 关于日志的级别 Springboot内置SLF4J【门面模式】 和 logback【日志框架】 在配置文件中可以设置日志级别【以.yml为例】 SpringBoot 持久化的保存日…...

编程日记 2023/10/27 15:52:46

向日葵远程控制中的键盘异常问题

本文记录的是ubuntu 20.04 上&#xff0c; 向日葵的最高版本目前只有V 11.0.1.44968&#xff08;2022.02&#xff09; 我的被控制和 控制端都是上述环境&#xff1b; 起因&#xff0c;由于我昨天在控制端按下了 win/ 或者是其他的组合键 &#xff08;具体哪个键盘确实没有注…...

编程日记 2023/10/27 15:51:45

【iOS免越狱】利用IOS自动化web-driver-agent_appium-实现自动点击+滑动屏幕

1.目标 在做饭、锻炼等无法腾出双手的场景中&#xff0c;想刷刷抖音 刷抖音的时候有太多的广告 如何解决痛点 抖音自动播放下一个视频 iOS系统高版本无法 越狱 安装插件 2.操作环境 MAC一台&#xff0c;安装 Xcode iPhone一台&#xff0c;16 系统以上最佳 3.流程 下载最…...

编程日记 2023/10/27 15:49:43

聊聊“JVM 调优JVM 性能优化”是怎么个事？

所谓“调优”就是一个诊断和处理手段&#xff0c;最终的目标是让系统的处理能力&#xff0c;也就是“性能”达到最优化。 计算机系统中&#xff0c;性能相关的资源主要分为这几类&#xff1a; CPU&#xff1a;CPU 是系统最关键的计算资源&#xff0c;在单位时间内有限&#xf…...

编程日记 2023/10/27 15:48:42

再获Gartner认可！持安科技获评ZTNA领域代表供应商

近日&#xff0c;全球权威市场研究与咨询机构Gartner发布了《Hype Cycle for Security in China, 2023&#xff08;2023中国安全技术成熟度曲线&#xff09;》报告&#xff0c;对2023年的20个中国安全技术领域的现状与发展趋势进行了详细的分析与解读。 其中&#xff0c;持安科…...

编程日记 2023/10/27 15:47:41

微服务-Feign

文章目录 Feign介绍Feign的基本使用自定义Feign的配置Feign性能优化Feign最佳实践 Feign介绍 RestTemplate远程调用存在的问题&#xff1a;代码可读性差&#xff0c;java代码中夹杂url&#xff1b;参数复杂很难维护 String url "http://userservice/user/" order.g…...

编程日记 2023/10/27 15:46:40

jsp获取数据 jsp直接获取后端数据 获取input选中的值 单选 没 checked属性

let str0${showList}; let str1${showList}; 然后可以通过JSON.parse() 转 获取input选中的值 //goodsType 按类别 goods按货品var oneType $("input[ namecriteria1 ] ").val();//count按数量 totalprice按费用var twoType $("input[ namecriteria2 ] &q…...

编程日记 2023/10/27 15:44:37

React 中 keys 的作用是什么？

目录 前言&#xff1a;React 中的 Keys 的重要性 为什么 Keys 重要&#xff1f; 详解&#xff1a;key 属性的基本概念 用法&#xff1a;key 属性的示例 解析&#xff1a;key 属性的优势和局限性 优势&#xff1a; 局限性&#xff1a; key 属性的最佳实践 稳定的唯一标…...

编程日记 2023/10/27 15:42:35

代码随想录 | Day46

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 今日学习目标一、算法题1.完全背包问题2.零钱兑换 II3.组合总和 Ⅳ 学习及参考书籍 今日学习目标 完全背包问题 零钱兑换 II&#xff08;518&#xff09; 组合总和…...

编程日记 2023/10/27 15:40:32

word行内插入mathtype 公式后行距变大解决办法

现象 word行内插入mathtype 公式后行距变大 解决方法 选中要进行操作的那些行&#xff0c;依次单击菜单命令“格式→段落”&#xff0c;打开“段落”对话框&#xff1b;单击“缩进和间距”选项卡&#xff0c;将间距的“段前”和“段后”都调整为“0行”&#xff1b;将“如果…...

编程日记 2023/10/27 15:39:31

直播预告 | YashanDB 2023年度发布会正式定档11月2日，邀您共同见证国产数据库发展实践！

11月2日&#xff0c;YashanDB 2023年度发布会将于云端直播开启&#xff0c;发布会以 「惟实励新」 为主题&#xff0c;邀请企业用户、合作伙伴、广大开发者共同见证全新产品与解决方案。届时发布会将在墨天轮社区同步进行&#xff0c;欢迎大家报名&#xff01; 惟实求真。Yasha…...

编程日记 2023/10/27 15:38:30

一文读懂WebClient和RestTemplate的差异

自 Spring 5 以来&#xff0c;WebClient已成为Spring WebFlux的一部分&#xff0c;并且是发出 HTTP 请求的首选方式。它是经典RestTemplate的首选替代方案&#xff0c;后者自 Spring 5.0 以来一直处于维护模式。 本文将讨论 Spring WebClient和RestTemplate类之间的主要区别。…...

编程日记 2023/10/27 15:37:30

如何使用SpringBoot处理全局异常

如何使用SpringBoot处理全局异常 使用ControllerAdvice 和 ExceptionHandler处理全局异常 参考&#xff1a; ControllerAdvice ResponseBody Slf4j public class ExceptionHandler {ResponseStatus(HttpStatus.OK)org.springframework.web.bind.annotation.ExceptionHandler…...

编程日记 2023/10/27 15:36:29

【2023CANN训练营第二季】——通过一份入门级算子开发代码了解Ascend C算子开发流程

本次博客讲解的代码是Gitee代码仓的Ascend C加法算子开发代码&#xff0c;代码地址为&#xff1a; quick-start 打开Add文件&#xff0c;可以看到文件结构如下&#xff1a; 其中add_custom.cpp是算子开发的核心文件&#xff0c;包括了核函数的实现&#xff0c;展示了如何在Asc…...

编程日记 2023/10/27 15:34:26

FFTW3内存管理最佳实践：fftw_malloc与数据对齐技巧

FFTW3内存管理最佳实践&#xff1a;fftw_malloc与数据对齐技巧 【免费下载链接】fftw3 DO NOT CHECK OUT THESE FILES FROM GITHUB UNLESS YOU KNOW WHAT YOU ARE DOING. (See below.) 项目地址: https://gitcode.com/gh_mirrors/ff/fftw3 FFTW3&#xff08;Fastest Fou…...

编程新知 2026/4/2 13:06:17

Ostrakon-VL扫描终端部署案例：单卡A10G跑通全任务链（上传→推理→终端输出）

Ostrakon-VL扫描终端部署案例&#xff1a;单卡A10G跑通全任务链&#xff08;上传→推理→终端输出&#xff09; 1. 项目背景与价值 在零售与餐饮行业&#xff0c;每天需要处理大量商品识别、货架巡检等重复性视觉任务。传统方案通常面临两个痛点&#xff1a;一是专业级识别系…...

编程新知 2026/4/2 12:09:28

3种架构级解决方案实现HTML到Figma的设计转代码自动化

3种架构级解决方案实现HTML到Figma的设计转代码自动化 【免费下载链接】figma-html Convert any website to editable Figma designs 项目地址: https://gitcode.com/gh_mirrors/fi/figma-html 在现代前端开发工作流中&#xff0c;设计稿与代码实现之间的鸿沟已成为影响…...

编程新知 2026/4/2 10:52:20

【Java等保三级最小可行合规方案】：从Spring Boot 2.7到3.2，仅需修改8处配置+3个注解

第一章&#xff1a;Java等保三级合规的底层逻辑与演进脉络等保三级&#xff08;GB/T 22239-2019《信息安全技术 网络安全等级保护基本要求》&#xff09;对Java应用系统提出了覆盖“安全物理环境、安全通信网络、安全区域边界、安全计算环境、安全管理中心”五大层面的强制性约…...

编程新知 2026/4/2 9:31:07

别再被 CAD+GIS 折腾到崩溃！这款插件让你效率翻 10 倍，一键搞定所有地理信息处理

做测绘、规划、市政设计的你&#xff0c;是不是每天都在被这些问题折磨&#xff1f;CAD 里画好图&#xff0c;切到 GIS 软件导数据&#xff0c;反复切换动辄半小时&#xff1b;加载大型影像文件卡到死机&#xff0c;属性表管理杂乱无章&#xff1b;想把 GIS 属性标到图纸上&…...

编程新知 2026/4/2 8:22:03

璀璨星河效果展示：古典结构×现代张力的Z-Image原生艺术生成

璀璨星河效果展示&#xff1a;古典结构现代张力的Z-Image原生艺术生成 “我梦见了画&#xff0c;然后画下了梦。” —— 文森特 梵高 今天&#xff0c;我想带你走进一个特别的数字艺术馆。在这里&#xff0c;冰冷的代码逻辑与炽热的艺术灵魂相遇&#xff0c;古典的审美结构与现…...

编程新知 2026/4/2 7:39:17

终端设置显示项目的分支名

function parse_git_branch() {git branch 2> /dev/null | sed -n -e s/^\* \(.*\)/[\1]/p}setopt PROMPT_SUBSTexport PROMPT%F{grey}%n%f %F{green}$(parse_git_branch)%f %F{normal}$%f 在.zshrc中设置以上即可...

编程新知 2026/4/2 7:25:09

【架构心法】撕碎“实验室完美”的傲慢！直视滚刀与高压现场的物理混沌，论工业级控制系统的“防御性悲观主义”

摘要&#xff1a;在纯净的实验室里&#xff0c;“1”永远是“1”&#xff0c;“0”永远是“0”。但在重型机械的施工现场&#xff0c;物理法则充满了不可预测的恶意。无数工程师带着“代码没 Bug 就不会死机”的天真走向现场&#xff0c;最终却在震动、高温与电磁噪声的围剿下全…...

编程新知 2026/4/2 6:50:40

终极指南：如何将danger-js与Webpack集成实现自动化代码审查

终极指南&#xff1a;如何将danger-js与Webpack集成实现自动化代码审查 【免费下载链接】danger-js ⚠️ Stop saying "you forgot to …" in code review 项目地址: https://gitcode.com/gh_mirrors/da/danger-js Danger JS是一个强大的自动化代码审查工具&a…...

编程新知 2026/4/2 5:29:49

OpenClaw语音交互：Phi-3-mini接入麦克风输入实战

OpenClaw语音交互&#xff1a;Phi-3-mini接入麦克风输入实战 1. 为什么需要语音交互能力 上周我在整理电脑文件时突然想到一个问题&#xff1a;当我的双手被占用时&#xff08;比如正在做饭或修理设备&#xff09;&#xff0c;如何让OpenClaw帮我执行任务&#xff1f;传统的键…...

编程新知 2026/4/2 4:59:37