网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
风云冷雨吧 关注：2贴子：243

回复：百度地图JavaScript API

只看楼主收藏回复

10、设置全景内展示的POI类型
<!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:"微软雅黑";}
#panorama {width:100%; height: 500px;}
#result {width:100%;font-size:12px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>设置全景内的展示的POI类型</title>
</head>
<body>
<div id="panorama"></div>
<div id="result">
POI类型显示: :
<select id="setPanoramaPOIType" style="size:20px" onchange="test.poiType(this)">
<option value="0">无(隐藏所有POI)</option>
<option value="1">酒店</option>
<option value="2">餐饮</option>
<option value="3">电影院</option>
<option value="4">公交站点</option>
<option value="5">室内景点</option>
</select>
</div>
</body>
</html>
<script type="text/javascript">
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.321463, 39.984738));
panorama.setPov({pitch: 6, heading: 138});
document.getElementById("setPanoramaPOIType").onchange = function(){
var selectValue = this.value;
switch(selectValue) {
case '0':
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_NONE); //无(隐藏所有POI)
break;
case '1':
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_HOTEL); //酒店
panorama.setPov({pitch: 6, heading: 138}); //手动参数，场景内已有该室内景，旋转后可见，现调整角度到该POI点的位置，方便开发者可见
break;
case '2':
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_CATERING); //餐饮
panorama.setPov({pitch: 6, heading: 138});
break;
case '3':
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_MOVIE); //电影院
panorama.setPov({pitch: 6, heading: 138});
break;
case '4':
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_TRANSIT); //公交站点，该场景（id为0100220000130902152251545J3）附近无站点POI
break;
case '5':
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_INDOOR_SCENE); //室内景点
panorama.setPov({
pitch: 18.960000000000015,
heading: 350.16741512558605
});
break;
default:
//无
}
};
</script>
11、全景图旋转
<!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:"微软雅黑";}
#panorama{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>全景图旋转示例</title>
</head>
<body>
<div id="panorama"></div>
<p>以指定位置为中心通过不断改变heading角度达到旋转效果</p>
</body>
</html>
<script type="text/javascript">
var panorama = new BMap.Panorama('panorama');
panorama.setId('0100010000130501122416015Z1');
var count,heading=0;
intervalId = setInterval(function(){
count++;
heading += 10;
if(heading > 360)
{
heading -= 360;
}
panorama.setPov({heading:heading,pitch : 0});//不断调整水平方向
if(count == 100){
starttime = (new Date()).valueOf();
}
if(count == 600)
{
endtime = (new Date()).valueOf();
var deltatime = endtime - starttime;
clearInterval(intervalId);
}
},500);
</script>
IP属地:浙江126楼2017-05-30 10:36
回复
    12、全景图事件
    <!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,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
    #panorama {width:100%; height: 500px; overflow: hidden;}
    #svInfoText {width:100%;}
    #info p{margin:5px 0;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>全景事件</title>
    </head>
    <body>
    <div id="panorama"></div>
    <div id="info"><p>拖动地图查看位置、视角变化</p></div>
    <div id="svInfoText"></div>
    </body>
    </html>
    <script type="text/javascript">
    var panorama = new BMap.Panorama('panorama');
    panorama.setPosition(new BMap.Point(120.31, 31.58));
    panorama.addEventListener('position_changed', function(e){ //全景位置改变事件
    panoramaCallBack(e);
    });
    panorama.addEventListener('pov_changed', function(e){ //全景视角改变事件
    panoramaCallBack(e);
    });
    function panoramaCallBack(e){ //事件回调函数
    if (e.type == 'onpov_changed') {
    document.getElementById('svInfoText').innerHTML="全景视角为：
    "+"水平视角："+panorama.getPov().heading+"
    垂直视角："+panorama.getPov().pitch;
    }
    else if (e.type=='onposition_changed') {
    document.getElementById('svInfoText').innerHTML="全景位置点为："+panorama.getPosition().lng+","+panorama.getPosition().lat;
    }
    }
    </script>
    IP属地:浙江127楼2017-05-30 11:54
    回复
      13、获取全景图数据
      <!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,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
      #panorama {width:100%; height: 500px; overflow: hidden;}
      #svInfoText {width:100%;font-size:14px;}
      </style>
      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
      <title>获取全景数据</title>
      </head>
      <body>
      <div id="panorama"></div>
      <div id="svInfoText"></div>
      </body>
      </html>
      <script type="text/javascript">
      var panorama = new BMap.Panorama('panorama');
      panorama.setPosition(new BMap.Point(120.31, 31.58));
      var panoramaService = new BMap.PanoramaService();
      panoramaService.getPanoramaByLocation(new BMap.Point(120.31, 31.58), function(data){
      var panoramaInfo="";
      if (data == null) {
      console.log('no data');
      return;
      }
      panoramaInfo +='全景id为：'+data.id+'\n';
      panoramaInfo +='
      全景路段名为：'+data.description+'\n';
      panoramaInfo +='
      坐标为：'+data.position.lng+':'+data.position.lat+'\n';
      document.getElementById('svInfoText').innerHTML= panoramaInfo;
      });
      </script>
      IP属地:浙江128楼2017-06-03 15:37
      回复
        十一、个性化地图
        1、设置主题模板样式
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <style type="text/css">
        html,body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";font-size:14px;}
        #allmap{height:500px;width:100%;}
        .optionpanel{margin: 10px;}
        #r-result{width:100%;}
        #r-result p{margin:5px 0 0 10px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <title>个性底图设置模板Demo页</title>
        </head>
        <body>
        <div id="allmap"></div>
        <div id="r-result">
        <div class="optionpanel">
        <label>选择主题</label>
        <select id="stylelist" onchange="changeMapStyle(this.value)"></select>
        </div>
        <p>查看详细信息请参考<a href='http://developer.baidu.com/map/custom/list.htm' target="_blank">个性模板列表页</a></p>
        </div>
        </body>
        </html>
        <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
        <script type="text/javascript">
        //初始化模板选择的下拉框
        var sel = document.getElementById('stylelist');
        for(var key in mapstyles){
        var style = mapstyles[key];
        var item = new Option(style.title,key);
        sel.options.add(item);
        }
        var map = new BMap.Map("allmap");
        window.map = map;
        var point = new BMap.Point(116.404, 39.915);
        map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
        map.enableScrollWheelZoom(); //启用滚轮放大缩小
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.disable3DBuilding();
        map.centerAndZoom(point, 14);
        //代码使用如下,即可. 模板页可以查看http://developer.baidu.com/map/custom/list.htm
        //map.setMapStyle({style:'midnight'});
        changeMapStyle('midnight')
        sel.value = 'midnight';
        function changeMapStyle(style){
        map.setMapStyle({style:style});
        $('#desc').html(mapstyles[style].desc);
        }
        </script>
        IP属地:浙江129楼2017-06-03 16:07
        回复
          2、设置自定义样式
          <!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:"微软雅黑";}
          #allmap{width:100%;height:500px;}
          p{margin-left:5px; font-size:14px;}
          </style>
          <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
          <title>个性化地图设置页</title>
          </head>
          <body>
          <div id="allmap"></div>
          <p>底图样式可通过<a href='http://developer.baidu.com/map/custom/' target="_blank">个性化在线编辑器</a>编辑获取</p>
          </body>
          </html>
          <script type="text/javascript">
          var map = new BMap.Map('allmap');
          map.centerAndZoom(new BMap.Point(116.404269,39.916042), 12);
          map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
          map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
          map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
          map.enableScrollWheelZoom(); //启用滚轮放大缩小
          map.disable3DBuilding();
          //个性化在线编辑器地址：http://developer.baidu.com/map/custom/
          var styleJson = [
          {
          "featureType": "all",
          "elementType": "geometry",
          "stylers": {
          "hue": "#007fff",
          "saturation": 89
          }
          },
          {
          "featureType": "water",
          "elementType": "all",
          "stylers": {
          "color": "#ffffff"
          }
          }
          ]
          map.setMapStyle({styleJson:styleJson});
          </script>
          IP属地:浙江130楼2017-06-03 16:09
          回复
            十二、检索示例
            1、关键字检索
            <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:"微软雅黑";}
            #allmap{width:100%;height:500px;}
            p{margin-left:5px; font-size:14px;}
            </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
            <title>根据关键字本地搜索</title>
            </head>
            <body>
            <div id="allmap"></div>
            <p>返回北京市“景点”关键字的检索结果，并展示在地图上</p>
            </body>
            </html>
            <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
            var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
            });
            local.search("景点");
            </script>
            2、多关键字检索
            <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,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
            #l-map{height:300px;width:100%;}
            #r-result{width:100%;}
            </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
            <title>根据多关键字本地搜索</title>
            </head>
            <body>
            <div id="l-map"></div>
            <div id="r-result"></div>
            </body>
            </html>
            <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("l-map"); // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
            var myKeys = ["酒店", "加油站"];
            var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map, panel:"r-result"},
            pageCapacity:5
            });
            local.searchInBounds(myKeys, map.getBounds());
            </script>
            IP属地:浙江131楼2017-06-03 17:12
            回复
              3、矩形区域检索
              <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:"微软雅黑";}
              #allmap{width:100%;height:500px;}
              p{margin-left:5px; font-size:14px;}
              </style>
              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
              <title>搜索区域内关键词</title>
              </head>
              <body>
              <div id="allmap"></div>
              <p>返回北京市矩形框区域范围内的“银行”关键字的检索结果，并展示在地图上</p>
              </body>
              </html>
              <script type="text/javascript">
              // 百度地图API功能
              var map = new BMap.Map("allmap"); // 创建Map实例
              map.centerAndZoom(new BMap.Point(116.274625,39.961627), 11);
              map.enableScrollWheelZoom(); //启用滚轮放大缩小
              var local = new BMap.LocalSearch(map, {
              renderOptions:{map: map}
              });
              var pStart = new BMap.Point(116.274625,39.961627);
              var pEnd = new BMap.Point(116.367474,39.988609);
              var bs = new BMap.Bounds(pStart,pEnd); //自己规定范围
              local.searchInBounds("银行", bs);
              var polygon = new BMap.Polygon([
              new BMap.Point(pStart.lng,pStart.lat),
              new BMap.Point(pEnd.lng,pStart.lat),
              new BMap.Point(pEnd.lng,pEnd.lat),
              new BMap.Point(pStart.lng,pEnd.lat)
              ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
              map.addOverlay(polygon);
              </script>
              4、圆形区域检索
              <!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:"微软雅黑";}
              #allmap{width:100%;height:500px;}
              p{margin-left:5px; font-size:14px;}
              </style>
              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
              <title>圆形区域搜索</title>
              </head>
              <body>
              <div id="allmap"></div>
              <p>返回北京市地图上圆形覆盖范围内的“餐馆”检索结果，并展示在地图上</p>
              </body>
              </html>
              <script type="text/javascript">
              // 百度地图API功能
              var map = new BMap.Map("allmap"); // 创建Map实例
              var mPoint = new BMap.Point(116.404, 39.915);
              map.enableScrollWheelZoom();
              map.centerAndZoom(mPoint,15);
              var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
              map.addOverlay(circle);
              var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
              local.searchNearby('餐馆',mPoint,1000);
              </script>
              IP属地:浙江132楼2017-06-03 18:55
              回复
                5、本地检索的结果面板
                <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:300px;width:100%;}
                #r-result{width:100%;}
                </style>
                <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                <title>本地搜索的结果面板</title>
                </head>
                <body>
                <div id="l-map"></div>
                <div id="r-result"></div>
                </body>
                </html>
                <script type="text/javascript">
                // 百度地图API功能
                var map = new BMap.Map("l-map"); // 创建Map实例
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                var local = new BMap.LocalSearch(map, {
                renderOptions: {map: map, panel: "r-result"}
                });
                local.search("餐饮");
                </script>
                6、本地检索的数据接口
                <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,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
                #l-map{height:300px;width:100%;}
                #r-result{width:100%; font-size: 14px; line-height: 20px;}
                </style>
                <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                <title>本地搜索的数据接口</title>
                </head>
                <body>
                <div id="l-map"></div>
                <div id="r-result"></div>
                </body>
                </html>
                <script type="text/javascript">
                // 百度地图API功能
                var map = new BMap.Map("l-map");
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                var options = {
                onSearchComplete: function(results){
                // 判断状态是否正确
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                var s = [];
                for (var i = 0; i < results.getCurrentNumPois(); i ++){
                s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                }
                document.getElementById("r-result").innerHTML = s.join("
                ");
                }
                }
                };
                var local = new BMap.LocalSearch(map, options);
                local.search("公园");
                </script>
                IP属地:浙江133楼2017-06-03 21:31
                回复
                  7、检索LBS云数据
                  <!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:"微软雅黑";}
                  #allmap{width:100%;height:500px;}
                  p{margin-left:5px; font-size:14px;}
                  </style>
                  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jYNU39RZ3k37NUz1QduizaYD"></script>
                  <!--加载鼠标绘制工具-->
                  <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
                  <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
                  <title>圆形区域搜索用户数据</title>
                  </head>
                  <body>
                  <div id="allmap"></div>
                  <p>请在地图上画圆，将会返回北京市地图上圆形覆盖范围内的用户数据检索结果(本示例是积水点数据)，并展示在地图上。此外也支持本地、bounds检索用户数据。</p>
                  </body>
                  </html>
                  <script type="text/javascript">
                  // 百度地图API功能
                  var map = new BMap.Map("allmap"); // 创建地图实例
                  var point = new BMap.Point(116.403694, 39.927552); // 创建点坐标
                  var options = {
                  renderOptions: {
                  map: map
                  },
                  onSearchComplete: function(results) {
                  alert('Search Completed');
                  //可添加自定义回调函数
                  }
                  };
                  var localSearch = new BMap.LocalSearch(map, options);
                  map.addEventListener("load", function() {
                  var circle = new BMap.Circle(point, 5000, {
                  fillColor: "blue",
                  strokeWeight: 1,
                  fillOpacity: 0.3,
                  strokeOpacity: 0.3
                  });
                  map.addOverlay(circle);
                  localSearch.searchNearby('积水点', point, 5000, {
                  customData: {
                  geotableId: 91687
                  }
                  });
                  });
                  map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
                  map.enableScrollWheelZoom();
                  map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
                  var drawingManager = new BMapLib.DrawingManager(map, {
                  isOpen: false, //是否开启绘制模式
                  enableDrawingTool: true, //是否显示工具栏
                  drawingToolOptions: {
                  anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                  offset: new BMap.Size(5, 5), //偏离值
                  scale: 0.8, //工具栏缩放比例
                  drawingModes: [
                  BMAP_DRAWING_CIRCLE
                  ]
                  }
                  });
                  var circle = null;
                  drawingManager.addEventListener('circlecomplete', function(e, overlay) {
                  //circlecomplete
                  map.clearOverlays();
                  circle = e;
                  map.addOverlay(overlay);
                  var radius = parseInt(e.getRadius());
                  var center = e.getCenter();
                  drawingManager.close();
                  localSearch.searchNearby('积水点', center, radius, {
                  customData: {
                  geotableId: 91687
                  }
                  });
                  });
                  </script>
                  IP属地:浙江134楼2017-06-03 21:32
                  回复
                    十二、公交检索接口
                    1、根据起终点名称查询公交换乘
                    <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:500px;width:100%;}
                    </style>
                    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
                    <title>根据起终点名称查询公交换乘</title>
                    </head>
                    <body>
                    <div id="l-map"></div>
                    <div id="driving_way">
                    <select>
                    <option value="0">最少时间</option>
                    <option value="1">最少换乘</option>
                    <option value="2">最少步行</option>
                    <option value="3">不乘地铁</option>
                    </select>
                    <input type="button" id="result" value="查询"/>
                    </div>
                    </body>
                    </html>
                    <script type="text/javascript">
                    // 百度地图API功能
                    var map = new BMap.Map("l-map");
                    map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
                    var start = "百度大厦";
                    var end = "北京邮电大学西门";
                    var routePolicy = [BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS];
                    var transit = new BMap.TransitRoute(map, {
                    renderOptions: {map: map},
                    policy: 0
                    });
                    $("#result").click(function(){
                    map.clearOverlays();
                    var i=$("#driving_way select").val();
                    search(start,end,routePolicy[i]);
                    function search(start,end,route){
                    transit.setPolicy(route);
                    transit.search(start,end);
                    }
                    });
                    </script>
                    2、根据起终点经纬度查询公交换乘
                    <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
                    </style>
                    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                    <title>根据起终点经纬度查询公交换乘</title>
                    </head>
                    <body>
                    <div id="allmap"></div>
                    </body>
                    </html>
                    <script type="text/javascript">
                    // 百度地图API功能
                    var map = new BMap.Map("allmap"); // 创建Map实例
                    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                    var p1 = new BMap.Point(116.301934,39.977552);
                    var p2 = new BMap.Point(116.508328,39.919141);
                    var transit = new BMap.TransitRoute(map, {
                    renderOptions: {map: map}
                    });
                    transit.search(p1, p2);
                    </script>
                    IP属地:浙江135楼2017-06-04 14:25
                    回复
                      3、起终点不明确的公交换乘
                      <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
                      </style>
                      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                      <title>根据起终点经纬度查询公交换乘</title>
                      </head>
                      <body>
                      <div id="allmap"></div>
                      </body>
                      </html>
                      <script type="text/javascript">
                      // 百度地图API功能
                      var map = new BMap.Map("allmap"); // 创建Map实例
                      map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                      var p1 = new BMap.Point(116.301934,39.977552);
                      var p2 = new BMap.Point(116.508328,39.919141);
                      var transit = new BMap.TransitRoute(map, {
                      renderOptions: {map: map}
                      });
                      transit.search(p1, p2);
                      </script>
                      4、公交换乘的结果面板
                      <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:300px;width:100%;}
                      #r-result,#r-result table{width:100%;font-size:12px;}
                      </style>
                      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                      <title>展示公交换乘的结果面板</title>
                      </head>
                      <body>
                      <div id="l-map"></div>
                      <div id="r-result"></div>
                      </body>
                      </html>
                      <script type="text/javascript">
                      // 百度地图API功能
                      var map = new BMap.Map("l-map");
                      map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                      var transit = new BMap.TransitRoute(map, {
                      renderOptions: {map: map, panel: "r-result"}
                      });
                      transit.search("王府井", "西单");
                      </script>
                      IP属地:浙江136楼2017-06-04 14:30
                      回复
                        5、公交换乘的数据接口
                        <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:300px;width:100%;}
                        #r-result {width:100%; font-size:14px;line-height:20px;}
                        </style>
                        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                        <title>获取公交换乘的数据接口</title>
                        </head>
                        <body>
                        <div id="l-map"></div>
                        <div id="r-result"></div>
                        </body>
                        </html>
                        <script type="text/javascript">
                        // 百度地图API功能
                        var map = new BMap.Map("l-map");
                        map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);
                        map.enableScrollWheelZoom();
                        var transit = new BMap.TransitRoute(map, {renderOptions: {map: map},onSearchComplete: function(result){
                        if (transit.getStatus() == BMAP_STATUS_SUCCESS){
                        var firstPlan = result.getPlan(0);
                        // 绘制步行线路
                        for (var i = 0; i < firstPlan.getNumRoutes(); i++){
                        var walk = firstPlan.getRoute(i);
                        if (walk.getDistance(false) > 0){
                        // 步行线路有可能为0
                        map.addOverlay(new BMap.Polyline(walk.getPath(), {lineColor: "green"}));
                        }
                        }
                        // 绘制公交线路
                        for (i = 0; i < firstPlan.getNumLines(); i++){
                        var line = firstPlan.getLine(i);
                        map.addOverlay(new BMap.Polyline(line.getPath()));
                        }
                        // 输出方案信息
                        var s = [];
                        for (i = 0; i < result.getNumPlans(); i++){
                        s.push((i + 1) + ". " + result.getPlan(i).getDescription(false));
                        }
                        document.getElementById("r-result").innerHTML = s.join("
                        ");
                        }
                        }
                        });
                        transit.search("中关村一街", "国贸桥");
                        </script>
                        6、修改公交换乘的起终点图标
                        <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
                        </style>
                        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                        <title>修改公交换乘的起终点图标</title>
                        </head>
                        <body>
                        <div id="allmap"></div>
                        </body>
                        </html>
                        <script type="text/javascript">
                        // 百度地图API功能
                        var map = new BMap.Map("allmap");
                        map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                        map.enableScrollWheelZoom();
                        var start = "魏公村" ,end = "百度大厦";
                        var transit = new BMap.TransitRoute(map, {
                        renderOptions: {map: map}
                        });
                        transit.search(start,end);
                        var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/location.jpg", new BMap.Size(14,23));
                        //设置起终点图标
                        transit.setMarkersSetCallback(function(result){
                        result[0].marker.setIcon(myIcon);
                        result[1].marker.setIcon(myIcon);
                        })
                        </script>
                        IP属地:浙江137楼2017-06-04 14:52
                        回复
                          7、查询公交、地铁线路
                          <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:300px;width:100%;}
                          #r-result {width:100%;}
                          </style>
                          <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                          <title>公交/地铁线路查询</title>
                          </head>
                          <body>
                          <div id="l-map"></div>
                          <div id="r-result"></div>
                          </body>
                          </html>
                          <script type="text/javascript">
                          // 百度地图API功能
                          var map = new BMap.Map("l-map"); // 创建Map实例
                          map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                          var busline = new BMap.BusLineSearch(map,{
                          renderOptions:{map:map,panel:"r-result"},
                          onGetBusListComplete: function(result){
                          if(result) {
                          var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
                          busline.getBusLine(fstLine);
                          }
                          }
                          });
                          function busSearch(){
                          var busName = 331;
                          busline.getBusList(busName);
                          }
                          setTimeout(function(){
                          busSearch();
                          },1500);
                          </script>
                          8、获取公交换乘的时间、距离
                          <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
                          </style>
                          <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                          <title>公交换乘的时间和距离</title>
                          </head>
                          <body>
                          <div id="allmap"></div>
                          </body>
                          </html>
                          <script type="text/javascript">
                          // 百度地图API功能
                          var map = new BMap.Map("allmap");
                          map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                          var output = "从上地到西单坐公交需要";
                          var searchComplete = function (results){
                          if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                          return ;
                          }
                          var plan = results.getPlan(0);
                          output += plan.getDuration(true) + "\n"; //获取时间
                          output += plan.getDistance(true) + "\n"; //获取距离
                          }
                          var transit = new BMap.TransitRoute(map, {renderOptions: {map: map},
                          onSearchComplete: searchComplete,
                          onPolylinesSet: function(){
                          setTimeout(function(){alert(output)},"1000");
                          }});
                          transit.search("上地", "西单");
                          </script>
                          IP属地:浙江138楼2017-06-04 15:01
                          回复
                            十三、驾车线路规划
                            1、根据起终点名称查询驾车路线
                            <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:"微软雅黑";}
                            #allmap{height:500px;width:100%;}
                            #r-result,#r-result table{width:100%;}
                            </style>
                            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                            <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
                            <title>根据起终点名称驾车导航</title>
                            </head>
                            <body>
                            <div id="allmap"></div>
                            <div id="driving_way">
                            <select>
                            <option value="0">最少时间</option>
                            <option value="1">最短距离</option>
                            <option value="2">避开高速</option>
                            </select>
                            <input type="button" id="result" value="查询"/>
                            </div>
                            <div id="r-result"></div>
                            </body>
                            </html>
                            <script type="text/javascript">
                            // 百度地图API功能
                            var map = new BMap.Map("allmap");
                            var start = "天安门";
                            var end = "百度大厦";
                            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                            //三种驾车策略：最少时间，最短距离，避开高速
                            var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
                            $("#result").click(function(){
                            map.clearOverlays();
                            var i=$("#driving_way select").val();
                            search(start,end,routePolicy[i]);
                            function search(start,end,route){
                            var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});
                            driving.search(start,end);
                            }
                            });
                            </script>
                            IP属地:浙江139楼2017-06-08 22:29
                            回复
                              2、根据起终点经纬度查询驾车路线
                              <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
                              </style>
                              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                              <title>根据起终点经纬度驾车导航</title>
                              </head>
                              <body>
                              <div id="allmap"></div>
                              </body>
                              </html>
                              <script type="text/javascript">
                              // 百度地图API功能
                              var map = new BMap.Map("allmap");
                              map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                              var p1 = new BMap.Point(116.301934,39.977552);
                              var p2 = new BMap.Point(116.508328,39.919141);
                              var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                              driving.search(p1, p2);
                              </script>
                              3、鼠标拖拽驾车起终点/途经点
                              <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:300px;width:100%;}
                              #r-result,#r-result table{width:100%;}
                              </style>
                              <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
                              <title>起终点可拖拽的驾车导航</title>
                              </head>
                              <body>
                              <div id="l-map"></div>
                              <div id="r-result"></div>
                              </body>
                              </html>
                              <script type="text/javascript">
                              // 百度地图API功能
                              var map = new BMap.Map("l-map");
                              map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
                              var transit = new BMap.DrivingRoute(map, {
                              renderOptions: {
                              map: map,
                              panel: "r-result",
                              enableDragging : true //起终点可进行拖拽
                              },
                              });
                              transit.search("西单","魏公村");
                              </script>
                              IP属地:浙江140楼2017-06-08 22:34
                              回复

                                扫二维码下载贴吧客户端

                                下载贴吧APP
                                看高清直播、视频！
                                发表回复
                                发贴请遵守贴吧协议及“七条底线”贴吧投诉
                                内  容:
                                  查看全部
                                发 表
                                保存至快速回贴

                                发布成功
                                去贴吧APP订阅抽奖结果通知
                                扫码进入贴吧APP
                                ···········
                                开奖后第一时间站内信通知
                                ···········
                                中奖结果全员公示