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>
