您的位置：首页 > Web前端 > JavaScript

javaScript百度地图

2016-07-14 17:58 381 查看

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}

        #l-map{height: 220px;width:100%;}

        #r-result,#r-result table{width:100%;}

        .nav { width: 100%; height: 2em; line-height: 2em; background: #EDEDED; border: 1px solid #ADADAD;}

        .nav .nav-inner{ width: 30%; margin-left: 35%;}

        .nav .nav-sub { float: left; width: 33%;}

        .nav .nav-sub a { text-decoration: none; }

        .nav .nav-sub a i { display: inline-block; background: url("http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/mo_banner_ba37b5d.png")}

        .nav .nav-sub a.bus i { background-position: -1px -192px; position: relative; top: 2px; width: 13px; height: 16px;}

        .nav .nav-sub a.driver i { background-position: -29px -194px; width: 15px; height: 14px;}

        .nav .nav-sub a.walk i { background-position: -102px -189px; width: 16px; height: 18px;}

        .nav .nav-sub a.bus.cur i { background-position: -15px -192px; }

        .nav .nav-sub a.driver.cur i { background-position: -45px -194px; }

        .nav .nav-sub a.walk.cur i { background-position: -120px -189px;}

        .hide { display: none;}

        input { font-family: "micrsoft yahei"; width: 80%; height: 2em; font-size: 1em; line-height: 2em; border: 0px; outline: 0px; padding: .2em 1em; margin: 0em 10%;}

        .btn-group { width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;}

        button {width: 32%; text-align: center; border: 0; border-radius: 0; background-color: inherit; height: 44px; line-height: 44px; font-size: 15px;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=g0EevAY0ZRD4dU8HjuMIxeF8uKdWvEfe"></script>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>

    <title>位置签到</title>

<style type="text/css">

       body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}

       /* #panorama {height: 80%;overflow: hidden;} */

       #normal_map {height:100%;overflow: hidden;}

   </style>

</head>

<body>

   <div id="panorama"></div>

   <div id="normal_map"></div>

   <script type="text/javascript">

   //全景图展示

   /* var panorama = new BMap.Panorama('panorama');

   panorama.setPosition(new BMap.Point(116.311573,40.058339)); //根据经纬度坐标展示全景图

   panorama.setPov({heading: -40, pitch: 6});

   panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变

       var pos = panorama.getPosition();

       map.setCenter(new BMap.Point(pos.lng, pos.lat));

       marker.setPosition(pos);

   }); */







   //普通地图展示

   /* var mapOption = {

           mapType: BMAP_NORMAL_MAP,

           maxZoom: 18,

           drawMargin:0,

           enableFulltimeSpotClick: true,

           enableHighResolution:true

       }

   var map = new BMap.Map("normal_map", mapOption);

   var testpoint = new BMap.Point(116.311573,40.058339);

   map.centerAndZoom(testpoint, 18);

   var marker=new BMap.Marker(testpoint);

   marker.enableDragging();

   map.addOverlay(marker);

   marker.addEventListener('dragend',function(e){

       panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变

       panorama.setPov({heading: -40, pitch: 6});}

   ); */





    var map = new BMap.Map("normal_map");

   var point = new BMap.Point(108.95309828,34.2777999);

   map.centerAndZoom(point,12);

   map.enableScrollWheelZoom();

   var geolocation = new BMap.Geolocation();

   geolocation.getCurrentPosition(function(r){

   if(this.getStatus() == BMAP_STATUS_SUCCESS){

   var mk = new BMap.Marker(r.point);

   map.addOverlay(mk);

   map.panTo(r.point);







   //alert('您的位置：'+r.point.lng+','+r.point.lat);

      var gc = new BMap.Geocoder();

        gc.getLocation(r.point, function(rs){

           var addComp = rs.addressComponents;


4000
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);



          var infoWindow = new BMap.InfoWindow(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street); // 创建信息窗口对象

           map.openInfoWindow(infoWindow,point);

        });







   }

   else {

   alert('failed'+this.getStatus());

   }

   })











   </script>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航