200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 百度地图api周边搜索功能 用单选按钮切换搜索类型

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

时间:2020-11-10 08:12:36

相关推荐

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

每次按钮点击都会清空添加的图层,再绘制中心点,中心点绘制成跳动的标记来和周边搜索区分,通过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./api?v=2.0&ak=1ALTaV0tWvwNHFeCa4qsQMyAd9UYalwj"></script><script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /><script src="/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。