html嵌入百度地图

news/2024/12/21 22:39:52/

html_0">html嵌入百度地图

key地址

https://lbsyun.baidu.com/apiconsole/key#/home ,点进去注册应用、然后复制key换掉即可显示地图

html"><!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.ppmy.cn/news/1534021.html

相关文章

YOLO11项目实战1:道路缺陷检测系统设计【Python源码+数据集+运行演示】

一、项目背景 随着城市化进程的加速和交通网络的不断扩展&#xff0c;道路维护成为城市管理中的一个重要环节。道路缺陷&#xff08;如裂缝、坑洞、路面破损等&#xff09;不仅影响行车安全&#xff0c;还会增加车辆的磨损和维修成本。传统的道路缺陷检测方法主要依赖人工巡检…

【ChatGPT】面向软件开发的提示词

面向软件开发人员的 ChatGPT 提示词 不会用ChatGPT就如同上图~~ 所以先推荐一波好用的提示词 1. 代码生成&#xff1a; 为名为 [name] 的 [class/module/component] 生成具有以下功能的样板 [language] 代码&#xff1a;[functionality description]。 创建一个 [语言] 函数以…

Web3Auth 如何工作?

Web3Auth 用作钱包基础设施&#xff0c;为去中心化应用程序 (dApp) 和区块链钱包提供增强的灵活性和安全性。在本文档中&#xff0c;我们将探索 Web3Auth 的功能&#xff0c;展示它如何为每个用户和应用程序生成唯一的加密密钥提供程序。 高级架构 Web3Auth SDK 完全存在于用…

推送k8s镜像到阿里云服务器

1、服务打包 2、打包后进入Dockerfile的同级目录 运行 docker build -t 镜像名:镜像版本 . (这个点是当前目录的意思&#xff0c;不能忽略)例如 docker build -t trac:v1.0.4 .3、上传镜像到阿里云镜像服务 注意选择区域 例如&#xff1a; docker tag 70743d9bdba3 registr…

【视频目标分割-2024CVPR】Putting the Object Back into Video Object Segmentation

Cutie 系列文章目录1 摘要2 引言2.1背景和难点2.2 解决方案2.3 成果 3 相关方法3.1 基于记忆的VOS3.2对象级推理3.3 自动视频分割 4 工作方法4.1 overview4.2 对象变换器4.2.1 overview4.2.2 Foreground-Background Masked Attention4.2.3 Positional Embeddings 4.3 Object Me…

对于无人机行业技术、人才、实验环境共享,这事你怎么看?

对于无人机行业技术、人才、实验环境共享这一话题&#xff0c;我认为这是一个具有前瞻性和积极意义的趋势&#xff0c;对于推动无人机行业的健康发展具有重要意义。以下是我对此事的详细看法&#xff1a; 一、技术共享促进创新与发展 1. 加快技术创新&#xff1a;技术共享能够…

【JavaWeb】JavaWeb笔记 HTTP

文章目录 简介HTTP1.0和HTTP1.1的区别 请求和响应报文报文的格式请求报文form表单发送GET请求特点GET请求行,请求头,请求体form表单发送post请求特点post的请求行 请求头 请求体 响应报文响应状态码更多的响应状态码 简介 HTTP 超文本传输协议 (HTTP-Hyper Text transfer proto…

Qt——如何创建一个项目

前言 本文主要通过实操带领大家来实现基础文件的操作&#xff0c;主要包括文件的打开&#xff0c;读取&#xff0c;写入&#xff0c;当然文件读写我们可以有几种不同的方式来进行操作&#xff0c;分别是文件流&#xff0c;字节流来进行的操作这里就需要两个类分别是文件流&…