zoukankan      html  css  js  c++  java
  • 百度地图案例

    <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 {
    100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
    }
     
    #allmap {
    height: 700px;
    100%;
    }
     
    #r-result,
    #r-result table {
    100%;
    }
    </style>
    <script type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak=你的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="text" id="start" />
    <input type="text" id="end" />
    <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");
     
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
    //三种驾车策略:最少时间,最短距离,避开高速
    var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
    $("#result").click(function () {
    var start = $("#start").val();
    var end = $("#end").val();
    // 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);
    // }
    //公交出行方案
    var transit = new BMap.TransitRoute(map, {
    renderOptions: { map: map, panel: "r-result" }
    });
    transit.search(start, end);
    });
    </script>
  • 相关阅读:
    HTML 5 音频
    HTML 5 视频
    HTMl链接- target/ name
    HTML 链接
    OGNL_一点
    struts_表单得到数据
    MySql_十六进制值
    HTML 事件属性(下)
    作业3-2 输入一个正整数 n,再输入 n 个学生的成绩,计算平均成绩,并统计所有及格学生的人数
    作业3-1 .输入一个整数 x,计算并输出下列分段函数 sign(x) 的值
  • 原文地址:https://www.cnblogs.com/tangzhizeishuai/p/11994708.html
Copyright © 2011-2022 走看看