JavaScript调用百度地图显示驾车,步行导航示例

  JavaScript调用百度地图显示驾车,步行导航示例

JavaScript调用百度地图显示驾车,步行导航示例

JavaScript调用百度地图显示驾车,步行导航示例源代码如下

<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>
    <!--记得更换百度地图ak密钥,为了测试代码贡献我自己网站的了-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1offaO5cablVaW8XYuwtsrVb"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>百度地图驾车,步行导航示例</title>
</head>
<body>
    <div id="l-map"></div>
    起点:<input type="text" id="txtStart" value="" /> 终点:<input type="text" id="txtEnd" value="" /><input type="button" value="驾车" onclick="doSearch(true)" /> <input type="button" value="步行" onclick="doSearch()" />
    <div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
    /*Power by showbo(http://www.w3dev.cn/),使用示例代码请保留出处*/
    var map = new BMap.Map("l-map");
    map.enableScrollWheelZoom();
    var myCity = new BMap.LocalCity();
    myCity.get(function (rst) { map.centerAndZoom(new BMap.Point(rst.center.lng, rst.center.lat), 15); });
    var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
    var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
    var route;
    function doSearch(isDrive) {
        route = isDrive ? driving : walking;
        var s = $('#txtStart').val(), e = $('#txtEnd').val();
        if (s == '') { alert('请输入起点!'); return false }
        if (e == '') { alert('请输入终点!'); return }
        route.search(s, e);
    }
</script>

 


原创文章,转载请注明出处:JavaScript调用百度地图显示驾车,步行导航示例

评论(0)Web开发网
阅读(149)喜欢(0)不喜欢(0)JavaScript/Ajax