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