`

百度地图根据起终点名称驾车导航展示-20130922

阅读更多
1、效果及功能说明

在地图上显示出起点到终点的距离和路线

2、实现原理

通过用户在两个关键词组里面填写的关键词组和地图上的信息进行核对,当全部正确的时候规划出正确的走向提示

主要的方法

//就是获得用户在哪里和需要去哪里的关键词组,在跟地图上的信息核对进行路线的规划
driving.search("西土城", "魏公村");


3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=54794f87ceb2aa2c191bd02d50a536ab"></script>
<title>根据起终点名称驾车导航</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地图获得图片的方法
var map = new BMap.Map("allmap");
//这是输入当前的坐标和地图分化的级别,地图分化级别越大地图呈现出来的东西就越完整最后可以细化到街道
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
//是创建用户的需求是什么,在这边建立一个起点到终点的路线方法
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
//获得地图上的信息对照在输入框里输入的两个关键词组有的话在地图上画出路线,前面的是起点后面的是终点
driving.search("西土城", "魏公村");
</script>

  • 大小: 184.5 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics