效果图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地图展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
#zoominput {
height: 24px;
width: 80px;
padding-left: 8px;
}
#change-btn {
height: 30px;
background: #5679ea;
border: 0;
padding: 0 10px 0 10px;
margin: 10px 8px 0 0;
cursor: pointer;
border-radius: 2px;
color: #fff;
font-size: 14px;
}
</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak="<!--你的秘钥（这个可以自己搜百度地图API申请）-->></script>
</head>
<body>
<div class="info">
<div>改变地图级别:</div>
<input id="zoominput" type="number" step="1" min="4" max="20" value="10" )>
<button id="change-btn" onclick="setNewZoom()">设置级别</button>
<button id="change-btn" onclick="map.zoomIn()">放大一级</button>
<button id="change-btn" onclick="map.zoomOut()">缩小一级</button>
<button id="change-btn" onclick="getMapZoom()">获取当前级别</button>
</div>
<div id="container"></div>
</body>
</html>
<script>
//初始化数据
var longitude = '114.42017310566577';
var latitude = '30.50685631263455';
//构建地图
//工作地址：114.427103398198 30.485693875815773
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(longitude, latitude), 18); // 初始化地图,设置中心点坐标和地图级别
// 创建图标
var myIcon = new BMapGL.Icon("/imgs/house.png", new BMapGL.Size(26, 26));
var point = new BMapGL.Point(longitude, latitude);
var marker = new BMapGL.Marker(point, {
icon: myIcon }); // 创建点标记
// 创建信息窗口
var opts = {
width: 200,
height: 100,
title: '所住地方'
};
var infoWindow = new BMapGL.InfoWindow('地址：武汉市洪山区光谷创业街特一号', opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
var myIcon1 = new BMapGL.Icon("/imgs/work.png", new BMapGL.Size(26, 26));
var point1 = new BMapGL.Point(114.427103398198, 30.485693875815773);
var marker1 = new BMapGL.Marker(point1, {
icon: myIcon1 }); // 创建点标记
// 创建信息窗口
var opts1 = {
width: 200,
height: 100,
title: '所工作地方'
};
var infoWindow1 = new BMapGL.InfoWindow('地址：武汉市洪山区光谷总部国际', opts1);
// 点标记添加点击事件
marker1.addEventListener('click', function () {
map.openInfoWindow(infoWindow1, point1); // 开启信息窗口
});
map.addOverlay(marker); // 在地图上添加点标记
map.addOverlay(marker1); // 在地图上添加点标记
map.enableScrollWheelZoom(true); //启用滚轮放大缩小。
map.enableInertialDragging(true);//启用地图惯性拖拽，默认禁用。
map.enableContinuousZoom(true); //启用连续缩放效果，默认禁用。
map.setHeading(64.5);//设置3D视角
map.setTilt(73);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
map.addControl(zoomCtrl);
function setNewZoom() {
var zoom = document.getElementById('zoominput').value;
map.setZoom(zoom);
}
function getMapZoom() {
alert(map.getZoom());
}
//设置2点路线图
//开始地方
var p1 = new BMapGL.Point(114.42017310566577, 30.50685631263455);
//结束地方
var p2 = new BMapGL.Point(114.427103398198, 30.485693875815773);
var driving = new BMapGL.DrivingRoute(map, {
renderOptions: {
map: map, autoViewport: true } });
driving.search(p1, p2);
</script>