html嵌入百度地图
html嵌入百度地图
key地址
https://lbsyun.baidu.com/apiconsole/key#/home ，点进去注册应用、然后复制key换掉即可显示地图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百度地图搜索示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 20px;}h1 {text-align: center;color: #333;}#search-container {text-align: center;margin-bottom: 20px;}#search-input {width: 300px;padding: 10px;font-size: 16px;}#search-button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}#mapcontainer {width: 80%;height: 400px;margin: 0 auto;border: 1px solid #ccc;border-radius: 5px;}</style>
</head>
<body>
<h1>百度地图搜索示例</h1>
<div id="search-container"><input type="text" id="search-input" placeholder="输入地点名称"><button id="search-button">搜索</button>
</div>
<div id="mapcontainer"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=***********"></script>
<script>$(document).ready(function() {var map = new BMap.Map("mapcontainer", {coordsType: 5});var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 11);map.enableScrollWheelZoom(true);var marker = new BMap.Marker(point);map.addOverlay(marker);// 添加搜索功能function searchLocation() {var local = new BMap.LocalSearch(map, {renderOptions: {map: map},onSearchComplete: function(results) {if (local.getStatus() == BMAP_STATUS_SUCCESS) {var firstResult = results.getPoi(0);if (firstResult) {point = firstResult.point;map.centerAndZoom(point, 15);marker.setPosition(point);console.log("搜索结果：", firstResult.title, point.lat, point.lng);} else {console.log("未找到结果");}} else {console.log("搜索失败");}}});var keyword = $("#search-input").val();local.search(keyword);}// 绑定搜索按钮点击事件$("#search-button").click(searchLocation);// 绑定输入框回车事件$("#search-input").keypress(function(e) {if (e.which == 13) {searchLocation();}});// 点击地图事件map.addEventListener("click", function(e){var clickedLat = e.point.lat;var clickedLng = e.point.lng;console.log("点击位置：", clickedLat, clickedLng);marker.setPosition(new BMap.Point(clickedLng, clickedLat));var geoc = new BMap.Geocoder();geoc.getLocation(e.point, function(rs){var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;console.log("地址信息：", address);});});});
</script>
</body>
</html>
相关文章：
html嵌入百度地图
html嵌入百度地图 key地址 https://lbsyun.baidu.com/apiconsole/key#/home ，点进去注册应用、然后复制key换掉即可显示地图 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>百度地图搜索…...
【网络】详解TCP协议中的可靠传输
【网络】详解TCP协议中的可靠传输 一. TCP协议段格式二. 确认应答——确保可靠性的核心机制1.确保时序2.确保发送方知道数据是否被对方接收到 三. 超时重传1. 发送的数据丢包2. ACK报文丢失 一. TCP协议段格式 TCP协议段格式相比UDP要复杂很多，很多内容需要我们了解…...
【Python实例】Python读取并绘制nc数据
【Python实例】Python读取并绘制nc数据 准备：安装netCDF库等读取nc数据相关信息绘制图形利用basemap绘图 参考 准备：安装netCDF库等 以【1960-2020年中国1km分辨率月降水数据集】中2020年降水为例。 先在Panopoly中查看数据属性，如下&#…...
swift使用llama3.2-vision微调xray数据集
1.数据格式 [{"query": "通过这张胸部X光影像可以诊断出什么？","response": "根据X射线图像，心脏大小正常，肺部看起来很清晰。已经排除了肺炎、积液、水肿、气胸、腺病、结节或肿块的存在。该发现表明一切正常。换句话说，总体印象是胸…...
学习小课堂
1.多服务节点下Session-Cooki方案如何做？ Session-Cookie 方案在单体环境是一个非常好的身份认证方案。但是，当服务器水平拓展成多节点时，Session-Cookie 方案就要面临挑战了。 举个例子：假如我们部署了两份相同的服务 A&#x…...
stm32学习笔记-RTC实时时钟
文章目录 一、RTC基础知识1.1 RTC简介1.2 RTC的晶振 二、stm32的RTC2.1 RTC和后备寄存器2.2 stm32 RTC结构框图及特性 三、stm32 RTC编程2.1 RTC初始化2.2 RTC控制程序 一、RTC基础知识 1.1 RTC简介 实时时钟的缩写是RTC(Real_Time Clock)。RTC 是集成电路，通常称…...
简历中的期望薪资怎么定？
在简历中撰写期望薪资时，既要体现你的价值认知，又要保持一定的灵活性和开放性，以便在后续的面试和薪资谈判中留有余地。以下是一些撰写期望薪资的合理方法： 一、明确薪资范围 1.市场调研： 在撰写期望薪资前…...
MySQL 中的 GROUP BY 使用
MySQL 中的 GROUP BY 使用指南 GROUP BY 是 SQL 中一个非常强大的语句，用于将查询结果按指定的列进行分组，并对每个分组执行聚合函数。它常常与聚合函数（如 COUNT、SUM、AVG、MIN 和 MAX）结合使用，以生成汇总信息。 …...
在 ubantu 20.04 云服务器上基于 bochs 编译 linux0.11
安装 bochs 将下面的命令全部执行一遍： sudo apt-get install build-essential sudo apt-get install xorg-dev sudo apt-get install bison sudo apt-get install g 我们区官网下载一下bochs的源码：bochs下载 这里我下载好了bochs2.6.8 这个版本的…...
docker-compose安装部署和使用
docker-compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YML 文件来配置应用程序需要的所有服务。然后，使用一个命令，就可以从 YML 文件配置中创建并启动所有服务 1.docker-compose安装 github上下载二进制文…...
Java之静态
静态： 使用 static 关键字声明的成分属于类本身，而不是类的任何特定对象的实例。这意味着你可以在创建类的任何对象之前访问它们。 静态变量： 静态变量（也称为类变量）是被类的所有实例共享的变量。无论你创建多少对象…...
PCB缺陷检测数据集 xml 可转yolo格式 ，共10688张图片
PCB缺陷检测数据集（yolov5,v7,v8） 数据集总共有两个文件夹，一个是pcb整体标注，一个是pcb部分截图。 整体标注有6个分类，开路，短路等都已经标注，标注格式为xml，每个文件夹下有100多张…...
【linux开发-驱动】-设备树
一、什么是设备树 描述设备树的文件叫做DTS（Device Tree Source），采用树形结构描述板级设备，也就是开发板上的设备信息，比如IIC接口上接了那些设备，内存基地址等 树的主干就是系统总线，枝干就…...
不动产证ocr识别场景解析、房产证识别API
不动产证OCR识别、房产证识别接口是通过光学字符识别技术（OCR）从不动产证书的图像或扫描件中自动提取关键信息的技术应用。该场景的主要目标是提高信息录入的效率，减少人工输入的错误，并能自动化处理大量不动产证书、房产证的数据…...
gpg 密钥生成、导入、导出、自动输入密码
目录 一、系统环境 二、常用命令（以签名密钥为例） （1）生成密钥 （2）列出私钥 （3）列出公钥 （4）导出公钥 （5）导出私钥 ÿ…...
新个性化时尚解决方案！Prompt2Fashion：自动生成多风格、类型时尚图像数据集。
今天给大家介绍一种自动化生成时尚图像数据的方法Prompt2Fashion。 首先创建了一组描述，比如“适合婚礼的休闲风格服装”，然后用这些描述来指导计算机生成图像。具体来说，他们使用了大型语言模型来写出这些服装的描述，接着将这些描…...
软件设计师——计算机网络
📔个人主页📚：秋邱-CSDN博客☀️专属专栏✨：软考——软件设计师🏅往期回顾🏆：软件设计师——操作系统🌟其他专栏🌟：C语言_秋邱 一、OSI/ RM七层模型(⭐⭐⭐)…...
Python 实现电话号码和Email地址提取程序
Python 实现电话号码和Email地址提取程序 背景 在日常工作或学习中，我们经常需要从网页或文档中提取信息，比如电话号码和E-mail地址。手动查找和提取这些信息可能会耗费大量时间，而自动化工具可以帮助我们快速完成这个任务。 本篇博客将带…...
JavaGuide（3）
一、项目背景与简介 JavaGuide由GitHub用户Snailclimb开发并维护，是一个全面而深入的Java学习资源库。它旨在为Java初学者和有经验的开发者提供一个系统的学习路径和丰富的资源，帮助他们系统地学习和巩固Java及相关技术知识。 二、项目内容与特点 Jav…...
微信小程序15天
UniApp(Vue3组合式API)和微信小程序15天学习计划 第1天：开发环境配置和基础知识 UniApp和微信小程序概述及对比安装并配置HBuilderX(UniApp)和微信开发者工具创建第一个UniApp Vue3项目和微信小程序项目了解两个平台的项目结构差异配置外部浏览器和各种小程序模拟…...
OpenLayers 可视化之热力图
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
宇树科技，改名了！
提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。 最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
Bean 作用域有哪些？如何答出技术深度？
导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答，…...
9-Oracle 23 ai Vector Search 特性 知识准备
很多小伙伴是不是参加了 免费认证课程（限时至2025/5/15） Oracle AI Vector Search 1Z0-184-25考试，都顺利拿到certified了没。 各行各业的AI 大模型的到来，传统的数据库中的SQL还能不能打，结构化和非结构的话数据如何和…...