百度地图制作游玩路途

最新推荐文章于 2024-10-19 00:23:36 发布

baker_zhuang

最新推荐文章于 2024-10-19 00:23:36 发布

阅读量725

点赞数 11

分类专栏：百度地图文章标签：百度

本文链接：https://blog.csdn.net/qq_26881073/article/details/136737070

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何通过HTML和JavaScript在百度地图上创建自驾游路径显示，包括获取APIkey、创建地图、添加路线点和景点标注。作者计划将其发展成一个可在线编辑的工具，方便用户规划旅行路线。

摘要由CSDN通过智能技术生成

最近和朋友筹划五一去青海玩，但是不在一起，导致景点顺序和地点一直说不清，全靠截图后画线，为了直观统一的展示，做了这个百度地图的路径显示，暂时只是为了这次出行做了计划，后续会把他做成一个可以在线编辑的小工具，方便大家使用。

首先需要到百度地图的控制台申请一个key

有了key之后创建一个html页面，创建地图，因为只是一个页面的单应用没必要创建项目和后台，创建html文件后做好基础准备后，引入百度地图的链接其中包括key。创建一个div用于显示地图

<!DOCTYPE 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;
        }
        #allmap {
            height: 100%;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=LNv4jy1PoPDEiQfaTWLSNxBzliOcgLY1"></script>
    <title>根据起点和终点经纬度驾车导航</title>
</head>
<body style="margin: none">
    <div id="allmap" ></div>
</body>
</html>
<script type="text/javascript">
</script>

效果如下：

然后开始用js创建地图，创建地图只需要简单的四行代码，第一个是确定地图在哪个div中显示，第创建一个中心点，表示地图打开后显示的中心在哪，第三部设置中心店，并设置缩放级别，这里设置11级别，一共20个级别，越小地图越详细但是看到的范围也越小，这里11算比较适合的。

    var map = new BMapGL.Map('allmap');
    var point = new BMapGL.Point(116.51397, 39.73517);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom(true);

接着定义去的景点的经纬度，经纬度的可以网上搜到也可以用在线工具选取到，并用DrivingRouteLine连接为路线，start为出发点，end为结束点，中间的point为途经点

var driving = new BMapGL.DrivingRouteLine(map, { 
        renderOptions: { 
            map: map, 
            autoViewport: true,
            enableDragging: true,
        }
    })
	let start = new BMapGL.Point(103.85226108133793, 36.05109696055869);
	let point1 = new BMapGL.Point(101.76614052513123, 36.65032050755429);
	let point2 = new BMapGL.Point(100.28921163548851,36.61058798984314);
	let point3 = new BMapGL.Point(99.07831192016602, 36.792446697926344);
	let point4 = new BMapGL.Point(100.1970910808752,38.196041592581714);
	let point5 = new BMapGL.Point(100.459094921175,38.93501416025796);
	let end = new BMapGL.Point(103.85226108133793, 36.05109696055869);
	
    driving.search(start, end, {
		waypoints: [point1, point2, point3, point4, point5]
	});

到这里已经有了基础的路线，但是每个地方只能看到途的标识，无法确定这个点的日期和景点名所以需要给每个景点添加备注，利用百度地图的Label添加覆盖物的方式给地图的每个点添加文字描述，文字的内容可以自定义，可以标识日期，游玩时间等

	var pointList=[{ lat: 36.05109696055869, lng: 103.85226108133793,  msg: '兰州5-2', content: '兰州吃面溜达溜达' },
	{lat: 36.65032050755429,lng: 101.76614052513123,msg: '西宁5-3',content: '在西宁吃面溜达溜达'},
	{lat: 36.61058798984314,lng: 100.28921163548851,msg: '青海湖5-3',content: '环湖浏览'},
	{lat: 36.792446697926344,lng: 99.07831192016602,msg: '茶卡镇5-4',content: '茶卡镇住宿'},
	{lat: 38.196041592581714,lng: 100.1970910808752,msg: '祁连山5-5',content: '祁连山溜达溜达'},
	{lat: 38.93501416025796,lng: 100.459094921175,msg: '张掖5-5',content: '张掖溜达溜达'},
	]
	for (let i = 0; i < pointList.length; i++) {
		let point = new BMapGL.Point(pointList[i].lng,pointList[i].lat);
		let content = pointList[i].msg+"<br>"+pointList[i].content
		let label = new BMapGL.Label(content, {       // 创建文本标注
		  position: point,
		  offset: new BMapGL.Size(0, 0)
		})
		map.addOverlay(label);                        // 将标注添加到地图中
		label.setStyle({                              // 设置label的样式
		  color: '#000',
		  fontSize: '15px',
		  border: '2px solid #1E90FF'
		})
	}