<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=2.0&ak=FbonyatSbRvrD6W2ApVIpz5BGT9wE18a"></script>
<title>Document</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 500px;
width: 700px;
border: 1px solid black;
margin: 30px;
}
</style>
</head>
<body>
<div id="container"></div> <br>
<label for="startPoint">
起点：<input type="text" id="startPoint" value="广东省广州市越秀区环市西路179号">
</label>
<label for="endPoint">
终点：<input type="text" id="endPoint" value="广东省广州市白云区广园西路133号">
</label>
<select>
<option value="bus">公交</option>
<option value="car">自驾</option>
<option value="step">不行</option>
</select><br>
<button class="route">规划路线</button>
<button class="load">加载</button>
<script>
var startPoint_input = document.querySelector('#startPoint');
var endPoint_input = document.querySelector('#endPoint');
var routeBtn = document.querySelector('.route')
var map = null;
document.querySelector('.load').onclick = function () {
map = new BMap.Map("container");
var point = new BMap.Point(113.26512290418745, 23.154485582798717);//设置中心点 经纬度
map.centerAndZoom(point, 15);//地图初始化，同时设置地图展示级别 登记1-21 数值越大
map.addControl(new BMap.NavigationControl());//平移缩放
//加载时所在地点标注
var centerMarker = new BMap.Marker(point);
map.addOverlay(centerMarker);
centerMarker.addEventListener('click', function (eve) {
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: '你现在地址在：' // 信息窗口标题
}
var geoc = new BMap.Geocoder()
geoc.getLocation(eve.point, function (info) {
var addressStr = info.address;
var infoWindow = new BMap.InfoWindow(addressStr, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());
event.stopPropagation();
})
})
map.addEventListener('click', function (eve) {
var geoc = new BMap.Geocoder()
geoc.getLocation(eve.point, function (info) {
console.log(info);
})
var Marker = new BMap.Marker(eve.point);
map.addOverlay(Marker);
})
}
routeBtn.onclick = function () {
startPoint_input_value = startPoint_input.value;
endPoint_input_value = endPoint_input.value;
var router_value = document.querySelector('select').value;
switch (router_value) {
case'bus':
{
var transit = new BMap.TransitRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
transit.search(startPoint_input_value, endPoint_input_value)
}
break;
case 'car': {
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true//自动切换视野
}
});
driving.search(startPoint_input_value, endPoint_input_value);//绘制路线图
}
break;
case 'step': {
var walk = new BMap.WalkingRoute(map, {
renderOptions: { map: map }
});
walk.search(startPoint_input_value, endPoint_input_value);//绘制路线图
}
break;
}
}
</script>
</body>
</html>老师 我为啥公交那个方案不会显示 为啥汇报这些错
京公网安备 11011402011233号