最近上课开始学习地图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;
}

成果

mark
mark
mark
mark

总体成果截图:

演示地址:https://study.xgblack.top/gisstudy/map01/