每次按鈕點擊都會清空添加的圖層,再繪製中心點,中心點繪製成跳動的標記來和周邊搜索區分,通過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>