q2617426
无感五
采纳率73.3%
2017-05-27 04:05

百度地址API 计算距离怎么改为可以直接在输入框里填写起点终点

50

以下是代码

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
<p style="height:40px;">

    <input id="pickupAddress" type="text" value="" onclick="doSearch()" /> 输入目的地:
    <input id="deliveryAddress" type="text" value="" onclick="doSearch()" /> 
</p>
    <div id="info"></div> 
    <div id="allmap"></div>

    <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 += ""; 
     output += plan.getDistance(true) + "<br>"; 
     document.getElementById('info').innerHTML = output 
     } 
        var transit = new BMap.DrivingRoute(map, {
            renderOptions: { map: map },
            onSearchComplete: searchComplete,
            onPolylinesSet: function () {

            }
        });
        function doSearch() { 
         var txtCity = document.getElementById('pickupAddress'), txtPoint = document.getElementById('deliveryAddress') 
         if (txtCity.value != ''&&txtPoint.value != '') transit.search(txtCity.value, txtPoint.value); 
         } 
    </script>

大神,现在代码改为这样,其他没问题了,就是输出时的数据,只显示最新的那个,请问一下怎么修改呢

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • showbo GoCityPass新加坡曼谷通票 4年前
    
    <p style="height:40px;">
        输入城市:
        输入起点: <input id="txtCity" type="text" value="上地" />
        输入目的地:<input id="txtPoint" type="text" value="西单" /><input type="button" value="查询" onclick="doSearch()" />
        <div id="allmap"></div>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    
        <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 += "总路程为:";
                output += plan.getDistance(true) + "\n"; //获取距离
            }
            var transit = new BMap.DrivingRoute(map, {
                renderOptions: { map: map },
                onSearchComplete: searchComplete,
                onPolylinesSet: function () {
                    setTimeout(function () { alert(output) }, "1000");
                }
            });
            function doSearch() {
                var txtCity = document.getElementById('txtCity'), txtPoint = document.getElementById('txtPoint')
                if (txtCity.value == '') { alert('请输入起点!'); txtCity.focus(); return }
                if (txtPoint.value == '') { alert('请输入目的地!'); txtPoint.focus(); return }
                transit.search(txtCity.value, txtPoint.value);
            }
        </script>
    
    
    点赞 1 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 4年前

    算了,重新发个完整的给你。

     <p style="height:40px;">
        输入城市:
        输入起点: <input id="txtCity" type="text" value="上地" onblur="doSearch()" />
        输入目的地:<input id="txtPoint" type="text" value="西单" onblur="doSearch()" />
        <div id="info"></div>
        <div id="allmap"></div>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    
    <script type="text/javascript">
            // 百度地图API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
    
        var searchComplete = function (results) {
            if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                return;
            }
            var plan = results.getPlan(0);
            var output = "从" + document.getElementById('txtCity').value + "到" + document.getElementById('txtPoint').value + "驾车需要";
            output += plan.getDuration(true) + "<br>";
            output += "总路程为:";
            output += plan.getDistance(true) + "<br>";
            document.getElementById('info').innerHTML = output
        };
        var transit = new BMap.DrivingRoute(map, {
            renderOptions: { map: map },
            onSearchComplete: searchComplete,
            onPolylinesSet: function () {
                // setTimeout(function () { alert(output) }, "1000");
            }
        });
        function doSearch() {
            var txtCity = document.getElementById('txtCity'), txtPoint = document.getElementById('txtPoint')
            if (txtCity.value != '' && txtPoint.value != '') transit.search(txtCity.value, txtPoint.value);
        }
    </script>
    
    点赞 1 评论 复制链接分享