java实现调用百度地图

这里使用的springboot+thymeleaf实现,所以需要有springboot技术使用起来更方便


当然,只使用html加js也可以实现,下面直接开始


首先我们需要去百度地图注册一个AK(百度地图开放平台 | 百度地图API SDK | 地图开发)


 找到左上角的开发文档,选择javaScriptAPI




按照步骤一步步走,注册好了后,点击应用管理——点击创建应用——去申请AK密钥



选择浏览器,随便去个名字,白名单必须填写,我们填*表示所有都可以访问!!(只做测试)



创建好了效果如下



就可以获得我们的AK密钥了


接下来直接放入代码,首先我们先搭建一个springboot项目,添加thymeleaf依赖与配置



 直接上地图代码,需要把获取的AK密钥填写进来,一切就准备就绪了


<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK密钥"></script><title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");    // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

 直接启动,启动后访问相对应的接口,看到如下效果就表示成功了



希望可以帮到各位小伙伴

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

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

相关文章

808协议是指中国国标GB/T 32960-2017《道路车辆运行数据远程监管与服务》通信协议,也被称为JT/T808协议

808协议是指中国国标GB/T 808协议是指中国国标GB/T 32960-2017《道路车辆运行数据远程监管与服务》通信协议&#xff0c;也被称为JT/T808协议。该协议规定了车辆与监管平台之间的通信规范&#xff0c;用于实现对道路车辆的远程监管和服务。 JT/T808协议主要包含以下几个方面的…

基于python+Django深度学习的音乐推荐方法研究系统设计与实现

摘 要 数字化时代带动着整个社会的信息化发展&#xff0c;随着数字媒体的不断发展&#xff0c;现在通多媒体数字产品的内容越来越丰富&#xff0c;传播影响力越来越强&#xff0c;以音乐为例&#xff0c;现在的音乐文化多样、音乐资源也异常的丰富&#xff0c;在这种大数据的环…

学会用命令行创建uni-app项目并用vscode开放项目

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 创建 uni-app 项目 命令行创建 uni-app 项目 编译和运行 uni-app 项目&#xff1a; 用 VS Code 开发 uni…

Elasticsearch踩坑:启动时 报错 java.nio.file.NoSuchFileException \lib\dt.jar

原因&#xff1a; ES 8.0.x版本对应jdk17以上&#xff0c;jdk17等高版本的jdk在配置环境变量时无需配置 CLASSPATH 解决&#xff1a; 1.将 /etc/profile 中的CLASSPATH的环境变量删除 2.配置立即生效source /etc/profile 3.重启ES

教你如何快速阅读葡萄酒标签

我们经常被问及葡萄酒标签上写了什么&#xff0c;总体而言这些信息可以分为四个关键部分&#xff0c;第一品牌或生产商&#xff1b;第二国家或地区&#xff1b;第三葡萄品种&#xff1b;第四年份。 第一品牌或生产商&#xff0c;在寻找葡萄酒的制造商时&#xff0c;著名的品牌名…

Vuex -mutations 传参修改仓库数据

文章目录 mutations 修改仓库数据一、mutations的基本修改二、mutations 传参修改数据1、 在触发事件的时候传递参数2、 提供事件方法&#xff0c;接收使用参数3、mutations方法接受使用参数传递参数注意事项&#xff1a; 三、综合代码&#xff08;练习、复习&#xff09;store…

一篇文章教会你什么是高度平衡二叉搜索(AVL)树

高度平衡二叉搜索树 AVL树的概念1.操作2.删除3.搜索4.实现描述 AVL树的实现1.AVL树节点的定义2.AVL树的插入3.AVL树的旋转3.1 新节点插入较高右子树的右侧---右右:左单旋3.2 新节点插入较高左子树的左侧---左左:右单旋3.3 新节点插入较高左子树的右侧---左右&#xff1a;先左单…

尖端AR技术如何在美国革新外科手术实践?

AR智能眼镜已成为一种革新性的工具&#xff0c;在外科领域具有无穷的优势和无限的机遇。Vuzix与众多医疗创新企业建立了长期合作关系&#xff0c;如Pixee Medical、Medacta、Ohana One、Rods & Cones、Proximie等。这些公司一致认为Vuzix智能眼镜可有效提升手术实践&#x…

计算机网络的故事——了解Web及网络基础

了解Web及网络基础 文章目录 了解Web及网络基础一、使用 HTTP 协议访问 Web二、HTTP 的诞生三、网络基础 TCP/IP四、与 HTTP 关系密切的协议 : IP、TCP 和 DNS 一、使用 HTTP 协议访问 Web 根据Web浏览器指定的URL&#xff0c;从对应的服务器中获取文件资源&#xff0c;从而显…

Java压缩文件为ZIP并加密

当您需要将文件加密并保存为ZIP文件时&#xff0c;可以使用net.lingala.zip4j库来实现。 步骤1&#xff1a;准备工作 首先&#xff0c;确保您已经包含了net.lingala.zip4j库&#xff0c;并将其添加到您的Java项目中。您可以通过Maven或Gradle等构建工具来添加这个库。仓库地址…

深度学习-4-二维目标检测-YOLOv5理论模型详解

YOLOv5理论模型详解 1.Yolov5四种网络模型 Yolov5官方代码中&#xff0c;给出的目标检测网络中一共有4个版本&#xff0c;分别是Yolov5s、Yolov5m、Yolov5l、Yolov5x四个模型。 YOLOv5系列的四个模型&#xff08;YOLOv5s、YOLOv5m、YOLOv5l、YOLOv5x&#xff09;在参数量和性…

手写Ribbon基本原理

本文已收录于专栏 《中间件合集》 目录 概念说明什么是RibbonRibbon和Nginx负载均衡的区别 工作流程代码实现RibbonSDK发送请求端引入RibbonSDK和Nacos的依赖配置文件中填写负载均衡策略调用代码 接收请求端执行效果发送请求端接收请求端 总结提升 概念说明 什么是Ribbon Ribb…

序列号读取

1.序列号读取 1.1 应用示例目的与思路 获取光盘的外接圆&#xff1b;然后进行极坐标变换&#xff0c;获取字符所在的区域&#xff1b;最后进行字符分割、识别及其在原图上显示。 1.2 应用示例相关算子介绍 (1) mean_image(Image : ImageMean : MaskWidth, MaskHeight : ) …

19 | spark 统计 每列的数据非缺失值

计算CSV文件中每列的数据覆盖率(非缺失值的百分比)时,您可以使用提供的Java代码来完成这项任务。以下是更详细的步骤: 1. 导入所需库和设置Spark配置 首先,您需要导入所需的Java库,并设置Spark的配置。这些库包括Apache Spark的Java库以及用于数据处理和格式化的其他Ja…

SQL语法

通用语法及分类 DDL: 数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库、表、字段&#xff09;DML: 数据操作语言&#xff0c;用来对数据库表中的数据进行增删改DQL: 数据查询语言&#xff0c;用来查询数据库中表的记录DCL: 数据控制语言&#xff0c;用来创建数…

uniapp 手机 真机测试 ​ 云打包 要是没申请 可以使用云打包 然后采用 测试权限即可​

uniapp 手机 真机测试 打开手机 找到手机的 版本号 点击 知道提示 &#xff08;启动开发者模式&#xff09; 然后 在进行usb的连接打开 运行uniapp 到手机基台 手机确认 即可 四&#xff0c; 云打包 要是没申请 可以使用云打包 然后采用 测试权限即可

每日刷题|回溯法解决全排列问题第二弹之解决字符串、字母大小排列问题

食用指南&#xff1a;本文为作者刷题中认为有必要记录的题目 前置知识&#xff1a;回溯法经典问题之全排列 ♈️今日夜电波&#xff1a;带我去找夜生活—告五人 0:49 ━━━━━━️&#x1f49f;──────── 4:59 …

2023国赛数学建模C题思路代码 - 蔬菜类商品的自动定价与补货决策

# 1 赛题 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差&#xff0c; 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&#xff0c; 商超通常会根据各商品的历史销售和需 求情况每天进行补货。 由于商超销售的蔬菜…

Vue3笔记

setup Vue3.0中一个新的配置项&#xff0c;值为一个函数。组件中所用到的&#xff1a;数据、方法等等&#xff0c;均要配置在setup中。setup函数的两种返回值&#xff1a; 若返回一个对象&#xff0c;则对象中的属性、方法&#xff0c;在模板中均可以直接使用。&#xff08;重…

QUIC协议科普导入(一)

一&#xff1a;QUIC协议导入 QUIC是一个通用的传输层网络协议&#xff0c;最初由Google的Jim Roskind设计&#xff0c;2012年实现并部署&#xff0c;2013年随着实验范围的扩大而公开发布&#xff0c;并向IETF描述。虽然长期处于互联网草案阶段&#xff0c;但在从Chrome浏览器到…