百度API获取位置范围内的周边服务代码,JS代码库,德仔网

代码语言

代码分类

【JS】百度API获取位置范围内的周边服务

作者:培政 / 发布于2015/7/22/ 464

百度地图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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　百度API　　周边服务　

同语言下

可能有用的

培政贡献的其它代码(22)