最近上课开始学习地图API开发的相关课程,所以作业做完之后也顺便发一下。
其实之前就学过相关课程,而且无非就是对着开发文档写代码。。。
需求
- 地图的样式设置
- 地图控件如:缩放、比例尺等
- 添加标注,标注点或者区域有信息窗口说明
- 具有逆/地址解析功能
- 可以进行出行规划
代码
html代码
<!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" />
<title>2016123539顾明光-作业一</title>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="bookmark" href="favicon.ico"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的百度开发者密钥"></script>
</head>
<body>
<div id="btn-con">
<button class="btn" id="btn-overview" onclick="overView.changeView()">打开鹰眼</button>
<button class="btn" id="btn-dri-road" onclick="chooseDriving()">路线规划</button>
<br>切换地图显示视图<br>
<select id="changetype-sel" onchange="changeMapType()">
<option value="BMAP_NORMAL_MAP">普通街道视图</option>
<option value ="BMAP_SATELLITE_MAP">卫星视图</option>
<option value ="BMAP_HYBRID_MAP">卫星和路网的混合视图</option>
</select>
</div>
<div id="allmap"></div>
<div id="r-result"></div>
</body>
</html>
<script src="js/function.js"></script>
js代码
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(119.253, 34.601), 13); // 初始化地图,设置中心点坐标和地图级别
// map.addControl(new BMap.MapTypeControl());
// map.setCurrentCity("江苏"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableKeyboard(true); //启用键盘操作
//添加平移缩放控件-右上角
var opts = {anchor: BMAP_ANCHOR_BOTTOM_RIGHT};
map.addControl(new BMap.NavigationControl(opts));
map.addControl(new BMap.ScaleControl());//添加比例尺
//添加鹰眼
var opt01 ={
anchor: BMAP_ANCHOR_TOP_LEFT};
var overView=new BMap.OverviewMapControl(opt01);
map.addControl(overView);
var point = new BMap.Point(119.225548, 34.612899);
// map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//设置标注的图标
var icon = new BMap.Icon("img/定位.png",new BMap.Size(100,100));
//设置标注的经纬度
var marker02 = new BMap.Marker(new BMap.Point(119.177111,34.642826),{icon:icon});
map.addOverlay(marker02);
var opt02={
width:200,
height:200,
title:"当前位置信息"
};
var locationInfo="<table>";
locationInfo=locationInfo+"<tr><td> 经度:</td><td id='location-lng-td'> 获取中...</td></tr>";
locationInfo=locationInfo+"<tr><td> 纬度:</td><td id='location-lat-td'> 获取中...</td></tr>";
locationInfo=locationInfo+"<tr><td> 地址:</td><td id='location-add-td'> 获取中...</td></tr>";
locationInfo += "</table>";
var infoWindow = new BMap.InfoWindow(locationInfo, opt02); // 创建信息窗口对象
// map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
// 创建地理编码实例
var myGeo = new BMap.Geocoder();
//点击地图,打开信息窗口
map.addEventListener("click",function(e){
// alert("经度坐标:"+e.point.lng+" 纬度坐标:"+e.point.lat) ;
var clickPoint=e.point;
var locationMarker = new BMap.Marker(clickPoint); // 创建标注
map.addOverlay(locationMarker);
map.openInfoWindow(infoWindow,clickPoint);
document.getElementById("location-lng-td").innerHTML=e.point.lng;
document.getElementById("location-lat-td").innerHTML=e.point.lat;
// 根据坐标得到地址描述
myGeo.getLocation(clickPoint, function(result){
if (result){
// var clickAddComp=result.addressComponents;
var clickAdd = result.address;
document.getElementById("location-add-td").innerHTML=clickAdd;
}else {
document.getElementById("location-add-td").innerHTML="获取失败!";
}
});
});
//更换地体显示类型
function changeMapType(){
var type = document.getElementById("changetype-sel").value;
if(type=="BMAP_NORMAL_MAP"){
map.setMapType(BMAP_NORMAL_MAP);
}else if(type=="BMAP_SATELLITE_MAP"){
map.setMapType(BMAP_SATELLITE_MAP);
}else if(type=="BMAP_HYBRID_MAP"){
map.setMapType(BMAP_HYBRID_MAP);
}
}
//出行路线规划
function chooseDriving(){
document.getElementById("allmap").style.height='350px';
var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
driving.search("淮海工学院", "连云港职业技术学院");
}
CSS代码:
body,
html,
#allmap{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
#r-result,
#r-result table{
width:100%;
}
#btn-con{
width:200px;
height:100px;
top:40px;
right:40px;
position:absolute;
z-index:9999;
border:2px solid yellow;
border-radius: 20px;
background-color:#FFFFFF;
box-shadow:5px 5px 10px #000;
text-align:center
}
.btn{
width:80px;
height:30px;
border: 0;
background: #b117c4;
border-radius: 20px;
color: white;
margin-top: 8px;
}
#changetype-sel{
width:150px;
height:30px;
margin-bottom: 10px;
border-radius: 20px;
}
成果
总体成果截图:
博主什么专业?有测量还有计算机课程 😕
地理信息科学?