用javaScript语言，通过百度地图API接口，实现搜索，并且在地图用气泡显示
1 创建本地搜索
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map },
});通过local对象搜索
2 调用local对象的search方法搜索
// 获得文本框的的内容 并且搜索
local.search($("#inp").val());$("#inp").val()是文本框的内容
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="author" content="wanmait" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>万码学堂</title>
<script type="text/javascript" src="/school65/js/jquery-3.6.0.min.js"></script>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=百度地图AK"
></script>
<style type="text/css">
#container {
height: 600px;
width: 800px;
}
/*容器地图的宽高 */
/* tip定位 */
.tip{
position: absolute;
top:35px;
z-index: 10000;
background-color:rgba(255,255,255,.7);
}
</style>
</head>
<body>
<input type="text" id="inp">
<div></div>
<div id="container"></div>
<!-- 存放地图的容器 -->
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图
var point = new BMapGL.Point(120.392, 36.088);
// 创建点坐标 初始地图显示的中心点坐标
map.centerAndZoom(point, 17);
// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//实现搜索
// 创建一个本地搜索
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map },
});
//文本框失去焦点事件
$(function(){
$("#inp").on("blur",function(){
// 获得文本框的的内容 并且搜索
local.search($("#inp").val());
})
})
</script>
</body>
</html>显示效果：
0条评论
点击登录参与评论