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>

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

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

相关文章

C++随心记 续一

C中的模板 在其它语言中如Java或者C#中可能叫做泛型&#xff0c;在C中为模板&#xff0c;泛型的限制通常比模板多。模板可以解决多次的代码重复问题&#xff0c;如以下场景 #include <iostream> #include <string>void print(int value) {std::cout << val…

MySQL存储和处理XML数据

文章目录 一、实战概述二、准备数据三、实战步骤1、创建数据库2、创建数据表3、插入XML数据4、查询XML数据5、修改XML数据6、删除XML数据7、注意事项四、实战小结一、实战概述 MySQL不直接支持XML数据类型,但可以通过TEXT或BLOB类型字段存储XML数据,利用ExtractValue和Update…

Spark Job 对象 详解

在 Apache Spark 中&#xff0c;Job 对象是执行逻辑的核心组件之一&#xff0c;它代表了对一系列数据操作&#xff08;如 transformations 和 actions&#xff09;的提交。理解 Job 的本质和它在 Spark 中的运行机制&#xff0c;有助于深入理解 Spark 的任务调度、执行模型和容…

滚雪球学Oracle[8.3讲]:区块链与Oracle

全文目录&#xff1a; 前言一、Oracle Blockchain的架构与应用1.1 Oracle Blockchain的基本架构1.1.1 Oracle Blockchain的核心组件 1.2 Oracle Blockchain的优势示例&#xff1a;Oracle Blockchain的实际应用 二、区块链与传统数据库的集成2.1 区块链与传统数据库的关系2.2 区…

PWM:控制信号的秘密武器

什么是PWM&#xff1f; PWM&#xff08;Pulse Width Modulation&#xff0c;脉宽调制&#xff09;是一种通过改变信号的占空比来控制电压输出的技术。简单来说&#xff0c;PWM信号由一系列高低电平组成&#xff0c;通过调节高电平持续的时间比例&#xff0c;可以控制信号的平均…

目前最好用的爬虫软件是那个?

作为一名数据工程师&#xff0c;三天两头要采集数据&#xff0c;用过十几种爬虫软件&#xff0c;也用过Python爬虫库&#xff0c;还是建议新手使用现成的软件比较方便。 这里推荐3款不错的自动化爬虫工具&#xff0c;八爪鱼、亮数据、Web Scraper 1. 八爪鱼爬虫 八爪鱼爬虫是一…

ARM base instruction -- ccmp

Conditional Compare (register) sets the value of the condition flags to the result of the comparison of two registers if the condition is TRUE, and an immediate value otherwise. 条件比较&#xff08;寄存器&#xff09;如果条件为真&#xff0c;则将条件标志的值…

Linux:深入理解冯诺依曼结构与操作系统

目录 1. 冯诺依曼体系结构 1.1 结构分析 1.2 存储结构分布图 2. 操作系统 2.1 概念 2.2 如何管理 2.3 什么是系统调用和库函数 1. 冯诺依曼体系结构 1.1 结构分析 不管是何种计算机&#xff0c;如个人笔记本电脑&#xff0c;服务器&#xff0c;都是遵循冯诺依曼结构。…

[leetcode]674_最长连续递增序列

给定一个未经排序的整数数组&#xff0c;找到最长且 连续递增的子序列&#xff0c;并返回该序列的长度。 连续递增的子序列 可以由两个下标 l 和 r&#xff08;l < r&#xff09;确定&#xff0c;如果对于每个 l < i < r&#xff0c;都有 nums[i] < nums[i 1] &am…

可视化图表与源代码显示配置项及页面的动态调整功能分析

可视化图表与源代码显示配置项及页面的动态调整功能分析 文章目录 可视化图表与源代码显示配置项及页面的动态调整功能分析1.分析图表源代码2.分析源代码显示功能**完整代码参考&#xff1a;** 3.分析源代码显示及动态调整**完整代码参考&#xff1a;** 4.分析代码编辑器及运行…

【AI知识点】泛化(Generalization)与过拟合(Overfitting)

泛化&#xff08;generalization&#xff09; 是机器学习中的一个核心概念&#xff0c;指的是模型在训练数据之外的新数据上表现得如何。换句话说&#xff0c;泛化能力衡量的是模型能否在未见过的样本上做出正确的预测或推断。 1. 泛化的背景 当我们训练机器学习模型时&#…

华为云LTS日志上报至观测云最佳实践

华为云LTS简介 华为云云日志服务&#xff08;Log Tank Service&#xff0c;简称 LTS&#xff09;&#xff0c;用于收集来自主机和云服务的日志数据&#xff0c;通过海量日志数据的分析与处理&#xff0c;可以将云服务和应用程序的可用性和性能最大化&#xff0c;为您提供实时、…

vue框架和uniapp框架区别

文章目录 vue框架和uniapp框架区别一、引言二、Vue.js 概述1、Vue.js 简介1.1、特点 2、适用场景 三、Uni-app 概述1、Uni-app 简介1.1、特点 2、适用场景 四、区别与比较1、跨平台能力2、开发体验3、性能优化4、社区和支持 五、总结 vue框架和uniapp框架区别 一、引言 在前端…

基于SSM的爱心慈善公益网站的设计与实现

文未可获取一份本项目的java源码和数据库参考。 选题意义 随着经济的不断进步&#xff0c;发展各种进行公益事业的渠道不断的出现&#xff0c;作为一个礼仪之邦&#xff0c;中华民族一直秉承先人的团结与友善精神&#xff0c;对社会和他人给予帮助关怀。但中国的公益事业相对…

【AIGC】2022-CVPR-利用潜在扩散模型进行高分辨率图像合成

2022-CVPR-High-Resolution Image Synthesis with Latent Diffusion Models 利用潜在扩散模型进行高分辨率图像合成摘要1. 引言2. 相关工作3. 方法3.1. 感知图像压缩3.2. 潜在扩散模型3.3. 调节机制 4. 实验4.1. 关于感知压缩权衡4.2. 利用潜在扩散生成图像4.3. 条件潜在扩散4.…

防sql注入的网站登录系统设计与实现

课程名称 网络安全 大作业名称 防sql注入的网站登录系统设计与实现 姓名 学号 班级 大 作 业 要 求 结合mysql数据库设计一个web登录页面密码需密文存放&#xff08;可以采用hash方式&#xff0c;建议用sha1或md5加盐&#xff09;采用服务器端的验证码&#…

基于Hive和Hadoop的招聘分析系统

本项目是一个基于大数据技术的招聘分析系统&#xff0c;旨在为用户提供全面的招聘信息和深入的职位市场分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以 Spark 为核…

OpenCV视频I/O(4)视频采集类VideoCapture之获取异常处理模式函数getExceptionMode()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 getExceptionMode 函数是 OpenCV 中 VideoCapture 类的一个方法&#xff0c;用于获取异常处理模式。这个模式决定了在 VideoCapture 对象操作期间…

英集芯IP5911:集成锂电池充电管理和检测唤醒功能的低功耗8位MCU芯片

英集芯IP5911是一款集成锂电池充电管理、咪头检测唤醒、负载电阻插拔和阻值检测等功能的8bit MCU芯片。其封装采用QFN16&#xff0c;应用时仅需极少的外围器件&#xff0c;就能够有效减小整体方案的尺寸&#xff0c;降低BOM成本&#xff0c;为小型电子设备提供高集成度的解决方…

【常读常悟】《大数据之路-阿里巴巴大数据实践》一书读书摘要

【常读常悟】《大数据之路-阿里巴巴大数据实践》一书读书摘要 1、背景2、目录结构3、数据加工链路4、章节摘要4.1 第2章 日志采集4.1.1 日志采集方案4.1.2 采集指标 4.2 第3章 数据同步4.2.1 数据的特点4.2.2 数据同步的三种方式4.2.3 数据同步的最佳实践 4.3 第4章 离线数据开…