百度地圖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.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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章