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

html嵌入百度地图

news 2026/2/10 19:45:08

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>百度地图搜索…...

编程日记 2024/10/11 1:20:06

【网络】详解TCP协议中的可靠传输

【网络】详解TCP协议中的可靠传输一. TCP协议段格式二. 确认应答——确保可靠性的核心机制1.确保时序2.确保发送方知道数据是否被对方接收到三. 超时重传1. 发送的数据丢包2. ACK报文丢失一. TCP协议段格式 TCP协议段格式相比UDP要复杂很多，很多内容需要我们了解…...

编程日记 2024/10/11 1:13:58

【Python实例】Python读取并绘制nc数据

【Python实例】Python读取并绘制nc数据准备：安装netCDF库等读取nc数据相关信息绘制图形利用basemap绘图参考准备：安装netCDF库等以【1960-2020年中国1km分辨率月降水数据集】中2020年降水为例。先在Panopoly中查看数据属性，如下&#…...

编程日记 2024/10/11 1:12:57

swift使用llama3.2-vision微调xray数据集

1.数据格式 [{"query": "通过这张胸部X光影像可以诊断出什么？","response": "根据X射线图像，心脏大小正常，肺部看起来很清晰。已经排除了肺炎、积液、水肿、气胸、腺病、结节或肿块的存在。该发现表明一切正常。换句话说，总体印象是胸…...

编程日记 2024/10/11 1:11:56

学习小课堂

1.多服务节点下Session-Cooki方案如何做？ Session-Cookie 方案在单体环境是一个非常好的身份认证方案。但是，当服务器水平拓展成多节点时，Session-Cookie 方案就要面临挑战了。举个例子：假如我们部署了两份相同的服务 A&#x…...

编程日记 2024/10/11 1:09:31

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 是集成电路，通常称…...

编程日记 2024/10/11 1:06:28

简历中的期望薪资怎么定？

在简历中撰写期望薪资时，既要体现你的价值认知，又要保持一定的灵活性和开放性，以便在后续的面试和薪资谈判中留有余地。以下是一些撰写期望薪资的合理方法： 一、明确薪资范围 1.市场调研： 在撰写期望薪资前&#xf…...

编程日记 2024/10/11 1:05:27

MySQL 中的 GROUP BY 使用

MySQL 中的 GROUP BY 使用指南 GROUP BY 是 SQL 中一个非常强大的语句，用于将查询结果按指定的列进行分组，并对每个分组执行聚合函数。它常常与聚合函数（如 COUNT、SUM、AVG、MIN 和 MAX）结合使用，以生成汇总信息。 …...

编程日记 2024/10/11 1:03:24

在 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 这个版本的…...

编程日记 2024/10/11 0:59:18

docker-compose安装部署和使用

docker-compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YML 文件来配置应用程序需要的所有服务。然后，使用一个命令，就可以从 YML 文件配置中创建并启动所有服务 1.docker-compose安装 github上下载二进制文…...

编程日记 2024/10/11 0:58:17

Java之静态

静态： 使用 static 关键字声明的成分属于类本身，而不是类的任何特定对象的实例。这意味着你可以在创建类的任何对象之前访问它们。静态变量： 静态变量（也称为类变量）是被类的所有实例共享的变量。无论你创建多少对象…...

编程日记 2024/10/11 0:56:15

PCB缺陷检测数据集 xml 可转yolo格式，共10688张图片

PCB缺陷检测数据集（yolov5,v7,v8） 数据集总共有两个文件夹，一个是pcb整体标注，一个是pcb部分截图。整体标注有6个分类，开路，短路等都已经标注，标注格式为xml，每个文件夹下有100多张…...

编程日记 2024/10/11 0:53:10

【linux开发-驱动】-设备树

一、什么是设备树描述设备树的文件叫做DTS（Device Tree Source），采用树形结构描述板级设备，也就是开发板上的设备信息，比如IIC接口上接了那些设备，内存基地址等树的主干就是系统总线，枝干就…...

编程日记 2024/10/11 0:52:08

不动产证ocr识别场景解析、房产证识别API

不动产证OCR识别、房产证识别接口是通过光学字符识别技术（OCR）从不动产证书的图像或扫描件中自动提取关键信息的技术应用。该场景的主要目标是提高信息录入的效率，减少人工输入的错误，并能自动化处理大量不动产证书、房产证的数据…...

编程日记 2024/10/11 0:50:06

gpg 密钥生成、导入、导出、自动输入密码

目录一、系统环境二、常用命令（以签名密钥为例） （1）生成密钥 （2）列出私钥 （3）列出公钥 （4）导出公钥 （5）导出私钥 &#xff…...

编程日记 2024/10/11 0:45:00

新个性化时尚解决方案！Prompt2Fashion：自动生成多风格、类型时尚图像数据集。

今天给大家介绍一种自动化生成时尚图像数据的方法Prompt2Fashion。首先创建了一组描述，比如“适合婚礼的休闲风格服装”，然后用这些描述来指导计算机生成图像。具体来说，他们使用了大型语言模型来写出这些服装的描述，接着将这些描…...

编程日记 2024/10/11 0:42:56

软件设计师——计算机网络

📔个人主页📚：秋邱-CSDN博客☀️专属专栏✨：软考——软件设计师🏅往期回顾🏆：软件设计师——操作系统🌟其他专栏🌟：C语言_秋邱一、OSI/ RM七层模型(⭐⭐⭐)…...

编程日记 2024/10/11 0:41:55

Python 实现电话号码和Email地址提取程序

Python 实现电话号码和Email地址提取程序背景在日常工作或学习中，我们经常需要从网页或文档中提取信息，比如电话号码和E-mail地址。手动查找和提取这些信息可能会耗费大量时间，而自动化工具可以帮助我们快速完成这个任务。本篇博客将带…...

编程日记 2024/10/11 0:40:54

JavaGuide（3）

一、项目背景与简介 JavaGuide由GitHub用户Snailclimb开发并维护，是一个全面而深入的Java学习资源库。它旨在为Java初学者和有经验的开发者提供一个系统的学习路径和丰富的资源，帮助他们系统地学习和巩固Java及相关技术知识。二、项目内容与特点 Jav…...

编程日记 2024/10/11 0:35:49

微信小程序15天

UniApp(Vue3组合式API)和微信小程序15天学习计划第1天：开发环境配置和基础知识 UniApp和微信小程序概述及对比安装并配置HBuilderX(UniApp)和微信开发者工具创建第一个UniApp Vue3项目和微信小程序项目了解两个平台的项目结构差异配置外部浏览器和各种小程序模拟…...

编程日记 2024/10/11 0:34:48

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2026/2/9 2:42:51

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章传送阵>> 点我查看说明：假设每台服务器已…...

编程新知 2026/2/10 11:45:58

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03