百度地图api周边搜索功能，用单选按钮切换搜索类型

最新推荐文章于 2024-05-14 15:38:39 发布

oneko

最新推荐文章于 2024-05-14 15:38:39 发布

阅读量3k

点赞数 3

分类专栏：百度地图api 文章标签：前端百度地图api 单选按钮地图周边搜索

本文链接：https://blog.csdn.net/qq_36616602/article/details/84888573

版权

百度地图api 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

每次按钮点击都会清空添加的图层，再绘制中心点，中心点绘制成跳动的标记来和周边搜索区分，通过var v=$(this).val();将按钮的value传给v,再用local.searchNearby(v, point, 1000);重新绘制周边搜索的点。

可以设置搜索矩形区域，多关键字搜索或将搜索结果显示到结果面板，可以点击查看百度地图APIdemo。

代码如下

<html>
<head>
	<meta charset="UTF-8">
	<title>百度地图api</title>
	<style type="text/css">
		#container{border:1px solid #F00; width:500px; height:400px;}
	</style>
	<!--调用百度地图api,jquery,bootstrap-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1ALTaV0tWvwNHFeCa4qsQMyAd9UYalwj"></script>
	<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<div>
	<!--垂直按钮组-->
        <div class="btn-group-vertical" style="float:left">
        <label class="btn btn-info for="one">
            <input type="radio" id="one" name="options" value="学校">学校
        </label>
        <label class="btn btn-info for="two">
            <input type="radio" id="two" name="options" value="餐饮">餐饮
        </label>
        <label class="btn btn-info for="three">
            <input type="radio" id="three" name="options" value="商场">商场
        </label>
        <label class="btn btn-info for="four">
            <input type="radio" id="four" name="options" value="医院">医院
        </label>
        <label class="btn btn-info for="five">
            <input type="radio" id="five" name="options" value="公交站">车站
        </label>
        </div>
    <!--地图-->
        <div id="container"></div>
	</div>
</body>
</html>
<script>
	// 百度地图API功能
	var map = new BMap.Map("container");    // 创建Map实例
	var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别
	var marker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker);               // 将标注添加到地图中
	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	map.enableScrollWheelZoom();//鼠标滑轮放大缩小控件
	var circle = new BMap.Circle(point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
	$(function(){
        $('input:radio[name="options"]').change(function(){
            map.clearOverlays();//清除地图覆盖物
            map.addOverlay(marker);// 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            map.addOverlay(circle);
            var v=$(this).val();
            var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
            local.searchNearby(v, point, 1000);
        });
    });
</script>

oneko

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
百度地图api周边搜索功能，用单选按钮切换搜索类型

每次按钮点击都会清空添加的图层，再绘制中心点，中心点绘制成跳动的标记来和周边搜索区分，通过var v=$(this).val();将按钮的value传给v,再用local.searchNearby(v, point, 1000);重新绘制周边搜索的点。可以设置搜索矩形区域，多关键字搜索或将搜索结果显示到结果面板，可以点击查看百度地图APIdemo。代码如下&lt;html&gt...
复制链接

扫一扫