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

最新推荐文章于 2021-10-14 14:31:28 发布

xjwolaile

最新推荐文章于 2021-10-14 14:31:28 发布

阅读量469

点赞数 1

分类专栏： jQuery 学习前端技术文章标签： BMap Point DrivingRoute map autoViewport

本文链接：https://blog.csdn.net/xjwolaile/article/details/84482033

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

1、效果及功能说明

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

2、实现原理

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

主要的方法


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

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0089/5351/ce012872-d48d-37bc-a467-4457a0e1118a.jpg[/img]

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>