You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
369 lines
12 KiB
369 lines
12 KiB
联系我们-の子页面
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>百度地图 - 定位到指定地址 + 搜索功能</title>
|
|
<style>
|
|
#container {
|
|
width: 100%;
|
|
height: 500px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.address-info {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 搜索框容器 */
|
|
.search-container {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 999;
|
|
width: 80%;
|
|
max-width: 400px;
|
|
}
|
|
.search-box {
|
|
display: flex;
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
|
|
overflow: hidden;
|
|
}
|
|
.search-box input {
|
|
flex: 1;
|
|
padding: 10px 12px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 14px;
|
|
}
|
|
.search-box button {
|
|
padding: 10px 16px;
|
|
background-color: #3388ff;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background 0.2s;
|
|
}
|
|
.search-box button:hover {
|
|
background-color: #2266cc;
|
|
}
|
|
|
|
/* 搜索建议下拉框 */
|
|
.suggestion-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
border-radius: 0 0 4px 4px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
.suggestion-item {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.suggestion-item:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
/* 定位按钮样式 */
|
|
.my-location-btn {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 20px;
|
|
z-index: 999;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
transition: all 0.2s;
|
|
}
|
|
.my-location-btn:hover {
|
|
background-color: #f0f0f0;
|
|
border-color: #999;
|
|
}
|
|
.map-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
/* 加载提示样式 */
|
|
.loading-tip {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0,0,0,0.7);
|
|
color: #fff;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
z-index: 1000;
|
|
font-size: 14px;
|
|
display: none;
|
|
}
|
|
|
|
/* 搜索结果标注特殊样式 */
|
|
.search-marker-label {
|
|
background: #ff5722;
|
|
color: white;
|
|
padding: 2px 6px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YVKEmy3L5Btf2QhFHEN7ZTCIQF8R4fzr"></script>
|
|
</head>
|
|
<body>
|
|
<div class="address-info">
|
|
<strong>目标地址：</strong>广州市天河区珠江西路17号1901房自编单元-1901-F单元
|
|
</div>
|
|
|
|
<div class="map-wrapper">
|
|
<div id="container"></div>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="search-container">
|
|
<div class="search-box">
|
|
<input type="text" id="searchInput" placeholder="搜索地点，如：天河城、广州塔、珠江新城地铁站" autocomplete="off">
|
|
<button id="searchBtn">搜索</button>
|
|
</div>
|
|
<div id="suggestionDropdown" class="suggestion-dropdown"></div>
|
|
</div>
|
|
|
|
<button id="myLocationBtn" class="my-location-btn">📍 定位到此地址</button>
|
|
<div id="loadingTip" class="loading-tip">正在定位...</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// ========== 初始化地图 ==========
|
|
var targetAddress = "广州市天河区珠江西路17号1901房自编单元-1901-F单元";
|
|
var targetCity = "广州市";
|
|
|
|
var map = new BMap.Map("container");
|
|
map.centerAndZoom(new BMap.Point(113.264, 23.129), 14);
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
// 添加地图控件（比例尺、缩放控件）
|
|
map.addControl(new BMap.NavigationControl());
|
|
map.addControl(new BMap.ScaleControl());
|
|
|
|
// 全局变量
|
|
var targetPoint = null;
|
|
var targetMarker = null;
|
|
var currentSearchMarker = null; // 当前搜索结果的标注
|
|
var localSearch = null; // 本地搜索实例
|
|
|
|
// ========== 地址解析函数（定位到目标地址） ==========
|
|
function parseAddressAndLocate() {
|
|
var loadingTip = document.getElementById("loadingTip");
|
|
loadingTip.style.display = "block";
|
|
|
|
var myGeo = new BMap.Geocoder();
|
|
myGeo.getPoint(targetAddress, function(point) {
|
|
loadingTip.style.display = "none";
|
|
|
|
if (point) {
|
|
targetPoint = point;
|
|
map.centerAndZoom(point, 18);
|
|
|
|
if (targetMarker) {
|
|
map.removeOverlay(targetMarker);
|
|
}
|
|
|
|
targetMarker = new BMap.Marker(point);
|
|
map.addOverlay(targetMarker);
|
|
|
|
var infoWindow = new BMap.InfoWindow(
|
|
"<strong>目标地址</strong><br/>广州市天河区珠江西路17号1901房自编单元-1901-F单元",
|
|
{ width: 220, title: "📍 定位点" }
|
|
);
|
|
targetMarker.addEventListener("click", function() {
|
|
this.openInfoWindow(infoWindow);
|
|
});
|
|
targetMarker.openInfoWindow(infoWindow);
|
|
} else {
|
|
alert("地址解析失败，请检查地址格式是否正确！");
|
|
}
|
|
}, targetAddress, { region: targetCity });
|
|
}
|
|
|
|
// ========== 搜索功能 ==========
|
|
function initLocalSearch() {
|
|
// 创建本地搜索实例
|
|
localSearch = new BMap.LocalSearch(map, {
|
|
renderOptions: { map: map, autoViewport: true }, // 自动调整视野
|
|
onSearchComplete: function(results) {
|
|
if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
|
|
// 搜索成功，获取第一个结果
|
|
var firstResult = results.getPoi(0);
|
|
if (firstResult) {
|
|
// 清除之前的搜索标注
|
|
if (currentSearchMarker) {
|
|
map.removeOverlay(currentSearchMarker);
|
|
}
|
|
|
|
// 获取搜索结果的坐标
|
|
var searchPoint = firstResult.point;
|
|
map.centerAndZoom(searchPoint, 18);
|
|
|
|
// 添加搜索结果的标注
|
|
currentSearchMarker = new BMap.Marker(searchPoint);
|
|
map.addOverlay(currentSearchMarker);
|
|
|
|
// 创建信息窗口
|
|
var infoWindow = new BMap.InfoWindow(
|
|
"<strong>搜索结果</strong><br/>" + firstResult.title + "<br/>" + firstResult.address,
|
|
{ width: 220, title: "🔍 " + firstResult.title }
|
|
);
|
|
currentSearchMarker.addEventListener("click", function() {
|
|
this.openInfoWindow(infoWindow);
|
|
});
|
|
currentSearchMarker.openInfoWindow(infoWindow);
|
|
}
|
|
} else {
|
|
alert("未找到相关地点，请尝试其他关键词");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 执行搜索
|
|
function searchLocation(keyword) {
|
|
if (!keyword || keyword.trim() === "") {
|
|
alert("请输入搜索关键词");
|
|
return;
|
|
}
|
|
|
|
if (!localSearch) {
|
|
initLocalSearch();
|
|
}
|
|
|
|
// 设置搜索范围（广州市）
|
|
localSearch.search(keyword, { region: targetCity });
|
|
}
|
|
|
|
// ========== 搜索建议（自动补全） ==========
|
|
var suggestionTimeout = null;
|
|
|
|
function getSuggestions(keyword) {
|
|
if (!keyword || keyword.trim() === "") {
|
|
document.getElementById("suggestionDropdown").style.display = "none";
|
|
return;
|
|
}
|
|
|
|
// 使用百度地图的Suggestion服务
|
|
var suggestion = new BMap.Suggestion();
|
|
suggestion.getSuggestions({
|
|
query: keyword,
|
|
region: targetCity,
|
|
onSearchComplete: function(result) {
|
|
var dropdown = document.getElementById("suggestionDropdown");
|
|
if (result && result.length > 0) {
|
|
var html = "";
|
|
for (var i = 0; i < Math.min(result.length, 8); i++) {
|
|
var item = result[i];
|
|
html += '<div class="suggestion-item" data-name="' + item.name + '" data-address="' + (item.address || '') + '">';
|
|
html += '<strong>' + item.name + '</strong>';
|
|
if (item.address) {
|
|
html += '<span style="display:block;font-size:12px;color:#999;">' + item.address + '</span>';
|
|
}
|
|
html += '</div>';
|
|
}
|
|
dropdown.innerHTML = html;
|
|
dropdown.style.display = "block";
|
|
|
|
// 绑定点击事件
|
|
var items = dropdown.querySelectorAll(".suggestion-item");
|
|
items.forEach(function(item) {
|
|
item.addEventListener("click", function() {
|
|
var name = this.getAttribute("data-name");
|
|
document.getElementById("searchInput").value = name;
|
|
dropdown.style.display = "none";
|
|
searchLocation(name);
|
|
});
|
|
});
|
|
} else {
|
|
dropdown.style.display = "none";
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// ========== 绑定事件 ==========
|
|
// 页面加载完成后自动定位到目标地址
|
|
parseAddressAndLocate();
|
|
initLocalSearch();
|
|
|
|
// 定位按钮：回到目标地址
|
|
document.getElementById("myLocationBtn").onclick = function() {
|
|
if (targetPoint) {
|
|
map.centerAndZoom(targetPoint, 18);
|
|
if (targetMarker) {
|
|
var infoWindow = new BMap.InfoWindow(
|
|
"<strong>目标地址</strong><br/>广州市天河区珠江西路17号1901房自编单元-1901-F单元",
|
|
{ width: 220, title: "📍 定位点" }
|
|
);
|
|
targetMarker.openInfoWindow(infoWindow);
|
|
}
|
|
} else {
|
|
parseAddressAndLocate();
|
|
}
|
|
};
|
|
|
|
// 搜索按钮点击
|
|
document.getElementById("searchBtn").onclick = function() {
|
|
var keyword = document.getElementById("searchInput").value;
|
|
searchLocation(keyword);
|
|
document.getElementById("suggestionDropdown").style.display = "none";
|
|
};
|
|
|
|
// 搜索框输入事件（实现搜索建议）
|
|
var searchInput = document.getElementById("searchInput");
|
|
searchInput.addEventListener("input", function(e) {
|
|
if (suggestionTimeout) clearTimeout(suggestionTimeout);
|
|
suggestionTimeout = setTimeout(function() {
|
|
getSuggestions(searchInput.value);
|
|
}, 300);
|
|
});
|
|
|
|
// 点击其他地方隐藏搜索建议
|
|
document.addEventListener("click", function(e) {
|
|
var container = document.querySelector(".search-container");
|
|
if (!container.contains(e.target)) {
|
|
document.getElementById("suggestionDropdown").style.display = "none";
|
|
}
|
|
});
|
|
|
|
// 回车搜索
|
|
searchInput.addEventListener("keypress", function(e) {
|
|
if (e.key === "Enter") {
|
|
var keyword = document.getElementById("searchInput").value;
|
|
searchLocation(keyword);
|
|
document.getElementById("suggestionDropdown").style.display = "none";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|