百度API獲取位置範圍內的周邊服務

Websites發表於2015-07-22
API

百度地圖API是一套為開發者免費提供的基於百度地圖的應用程式介面,包括JavaScript、iOS、Andriod、靜態地圖、Web服務等多種版本,提供基本地圖、位置搜尋、周邊搜尋、...


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=(百度API key,可免費申請)"></script>
<style type="text/css">
body,html,#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}

#allmap {
	margin-top: 35px;
}

#golist {
	display: none;
}

@media ( max-device-width : 780px) {
	#golist {
		display: block !important;
	}
}
.tuijian_listbox1 {
	position: fixed;
	background: #fff;
	height: 35px;
	top: 0px;
	left: 0px;
	width: 100%;
}

ul.tuijian_list2 li {
	width: 24%;
	height: 35px;
	float: left;
	text-align: center;
	line-height: 35px;
}
</style>
<body>

	<div class="tuijian_listbox1">
		<ul class="tuijian_list2">
			<li val_class="景點">景點</li>
			<li val_class="住宿" style="border-left: solid 1px #e4e4e4;">住宿</li>
			<li val_class="農家樂" style="border-left: solid 1px #e4e4e4;">農家樂</li>
			<li val_class="小吃" style="border-left: solid 1px #e4e4e4;">特色小吃</li>
		</ul>
	</div>
	<div class="map" id="allmap"></div>
<script type="text/javascript">
var map;
var bounds;
var circle;
var local;
var lng='118.792255';
var lat='32.047475';//指定位置的經度緯度可以到百度定位拾取系統去拿 http://api.map.baidu.com/lbsapi/getpoint/index.html
var search= '景區';
var MyMarker;
	// 百度地圖API功能
$(function(){
	map = new BMap.Map("allmap");
	GetLocation();  
	var mPoint = new BMap.Point(lng,lat);
	var MyIcon = new BMap.Icon("標記箭頭圖示路徑", new BMap.Size(18,28));
	MyMarker = new BMap.Marker(mPoint,{icon:MyIcon});
	map.enableScrollWheelZoom();
	map.centerAndZoom(mPoint,15);
	map.addOverlay(MyMarker);
	
	map.addEventListener("click", function(e){
		map.removeOverlay(MyMarker);
		mPoint = new BMap.Point(e.point.lng,e.point.lat);
		MyMarker = new BMap.Marker(mPoint,{icon:MyIcon});
		map.addOverlay(MyMarker);
		Search(search,mPoint);
	});
	
	$('.tuijian_list2 li').each(function(index) {
		$(this).click(function(){
			$(this).parents('.tuijian_list2').find('.tuijian_in').removeClass('tuijian_in');
			$(this).addClass("tuijian_in");
			search = $(this).attr('val_class');
			Search(search,mPoint); 
	    });
	});
	Search(search,mPoint);
   
});	

/**
 * 得到圓的內接正方形bounds
 * @param {Point} centerPoi 圓形範圍的圓心
 * @param {Number} r 圓形範圍的半徑
 * @return 無返回值   
 */
function getSquareBounds(centerPoi,r){
   var a = Math.sqrt(2) * r; //正方形邊長
   var mPoi = getMecator(centerPoi);
   var x0 = mPoi.x, y0 = mPoi.y;
   var x1 = x0 + a / 2 , y1 = y0 + a / 2;//東北點
   var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南點
   var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
   return new BMap.Bounds(sw, ne);         
};
//根據球面座標獲得平面座標。
function getMecator(poi){
   return map.getMapType().getProjection().lngLatToPoint(poi);
};
    //根據平面座標獲得球面座標。
function getPoi(mecator){
   return map.getMapType().getProjection().pointToLngLat(mecator);
};

function Search(search,mPoint){
	map.clearOverlays();
	circle = new BMap.Circle(mPoint,1000,{stroke:"white",strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);
    local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
    bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
    local.searchInBounds(search,bounds);
    map.addOverlay(MyMarker);
    /*
	map.centerAndZoom(mPoint, 16);
	var local = new BMap.LocalSearch(map, {
		renderOptions: {map: map, panel: "r-result"}
	});
	local.search(search);
	*/
};

function GetLocation(){
   var geolocation = new BMap.Geolocation();
   geolocation.getCurrentPosition(function(r){
	   if(this.getStatus() == BMAP_STATUS_SUCCESS){
			lng = r.point.lng;
			lat = r.point.lat;
		}else{
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true}
  );
};
    

</script>
</body>
</html>

相關文章