百度地图API是一套为开发者免费提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地图、位置搜索、周边搜索、...
[html]
<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‘;//指定位置的经度纬度可以到百度定位拾取系统去拿
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;