master

分支 (1)

管理

管理

master

Java_web
/
百度地图api2.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: "微软雅黑";
        }

        a {
            text-decoration: none;
            color: black;
        }

        #l-map,
        .l-search {
            float: left;
            height: 100%;
        }

        #l-map {
            width: 75%;
        }

        .l-search {
            width: 25%;
        }

        .ls-top {
            width: 100%;
            height: 10%;
        }

        .ls-down {
            width: 100%;
            height: 90%;
        }

        .lst-t,
        .lst-d {
            width: 100%;
            height: 50%;
        }

        .lst-t>div {
            height: 100%;
            width: 80%;
            margin: 0 auto;
        }

        .lst-d>a {
            display: inline-block;
            width: 48%;
            text-align: center;
            font-weight: 900;
            border: 2px solid black;
        }

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

        #r-result2,
        #r-result2 table {
            height: 100%;
            width: 100%;
            overflow: scroll;
        }

        #r-result2 {
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N"></script>
    <title>驾车导航的结果面板</title>
</head>

<body>
    <div class="l-search">
        <div class="ls-top">
            <div class="lst-t">
                <div>
                    <input type="text" id="keyword">
                    <button>搜索</button>
                </div>
            </div>
            <div class="lst-d">
                <a href="#" id="transit">公交路线</a>
                <a href="#" id="driving">自驾游路线</a>
            </div>
        </div>
        <div class="ls-down">
            <div id="r-result"></div>
            <div id="r-result2"></div>
        </div>
    </div>
    <div id="l-map"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");

    var position = [110.751, 27.5379];
    map.centerAndZoom(new BMap.Point(position[0], position[1]), 14); // 设置地图中心为止，以及缩放程度
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

    var driving = new BMap.DrivingRoute(map, {
        renderOptions: {
            map: map,
            panel: "r-result",
            autoViewport: false,
            selectFirstResult: true,
            highlightMode: BMAP_HIGHLIGHT_ROUTE
        }
    }); // 自驾游路线

    var transit = new BMap.TransitRoute(map, {
        renderOptions: {
            map: map,
            panel: "r-result2"
        }
    }); // 公交路线

    var button = document.querySelector('button');
    var keyword = document.querySelector('#keyword');
    var transit1 = document.querySelector('#transit');
    var driving1 = document.querySelector('#driving');
    var a_s = document.querySelectorAll('.lst-d >a');
    var result1 = document.querySelector('#r-result');
    var result2 = document.querySelector('#r-result2');

    var re_color = function () {
        a_s.forEach(function (ele, index) {
            ele.style.color = 'black';
        });
    }

    button.onclick = function () {
        let v = keyword.value;
        if (v != '') {
            transit.clearResults();
            transit.search(v, '隆回');
            re_color();
            transit1.style.color = 'red';
            result1.style.display = 'none';
            result2.style.display = 'block';
        } else {
            alert('请输入起点！😊');
        }
    }

    transit1.onclick = function () {
        let v = keyword.value;
        if (v != '') {
            transit.clearResults();
            re_color();
            transit.search(v, '隆回');
            transit1.style.color = 'red';
            result1.style.display = 'none';
            result2.style.display = 'block';
        } else {
            alert('请输入起点！😊');
        }
    }

    driving1.onclick = function () {
        let v = keyword.value;
        if (v != '') {
            driving.clearResults();
            driving.search(v, "隆回");
            re_color();
            driving1.style.color = 'red';
            result1.style.display = 'block';
            result2.style.display = 'none';
        } else {
            alert('请输入起点！😊');
        }
    }
</script>