写在前面

  这次的作业要求如下:
- 从用户需求的角度,完善原有功能
- 可实现图层叠加功能
- 计算随机点之间的距离
- 给地图添加右键菜单
- 浏览器定位功能

功能介绍

图层叠加

  图层叠加给地图添加了显示实时路况的功能。点击“实时路况”按钮,地图开始展示实时的路况信息,并且按钮显示文字换为“关闭路况”,点击“关闭路况”,实时路况关闭。
mark

测距

  给地图添加了测距工具。这里调用了百度开源实验室的DistanceTool.js(基于Baidu Map API 1.2)
  点击工具箱中的“开始测距”,鼠标显示变为一把直尺,并且按钮变为“停止测距”。在地图上点击便开始测距,双击则停止测距。如果点击了开始测距,想停止,则直接点击“停止测距”。
此处已知bug:双击停止了测距之后,按钮不会直接变为“开始测距”
mark

右键菜单

  地图右键菜单添加了放大、缩小、开/关实时路况三个菜单项。
mark

浏览器定位

  直接调用浏览器的定位功能获取定位,并将地图移到当前位置

工具箱美化

  上一个版本的功能面板一直停留在地图上,会遮挡住一部分地图,尤其是在低分辨率设备上或者手机屏幕上。
  为解决这一问题,将功能面板改为工具箱,默认大小只有300*50,并且半透明,只有当鼠标放在工具箱上面时,工具箱才会自动展开并变为不透明。并且整个工具箱可以在整个屏幕上用鼠标进行拖拽,最大可能的解决了屏幕遮挡问题。
默认状态:
mark
鼠标停留:
mark
鼠标拖拽:
mark
mark

代码

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="https://api.map.baidu.com/api?v=2.0&ak=你的百度开发者密钥"></script>
    <script type="text/javascript" src="js/DistanceTool.js"></script>



</head>
<body>
<div id="btn-con"  @mousedown="down" @mousemove="move" @mouseup="up">
    <div id="div-move"><img src="img/tools.png" width="48"height="48"> <p>工具箱</p></div>
    <button class="btn" id="btn-overview" onclick="overView.changeView()">开/关鹰眼</button>

    <button class="btn" id="btn-now-road" onclick="nowRoad()">实时路况</button>

    <button class="btn" id="btn-tool-distence" onclick="getDis()">开始测距</button>
<br>
    <input class="inp" id="search" type="text" value="北京市">
    <button class="btn" id="btn-search" onclick="poisearch(search.value)"><img src="img/搜索.png"></button>

    <button class="btn" id="btn-now-location" onclick="locationNow()">
        <img src="img/location.png"width="16px" height="16px">
        定位
    </button>

    <br>
    <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>
    <br><br>
    起点<input class="inp" id="start" type="text" value="淮海工学院">
    <br><br>
    终点<input class="inp" id="end" type="text" value="苏宁广场">
    <br><br>
    <button class="btn" id="btn-Transit" onclick="transitRoute(start.value,end.value)">公交路线</button>
    <button class="btn" id="btn-Driving" onclick="drivingRoute(start.value,end.value)">驾车路线</button>
    <button class="btn" id="btn-Walking" onclick="walkingRoute(start.value,end.value)">步行路线</button>
    <br><br>
</div>
<div id="allmap"></div>
<div id="r-result"></div>
<script type="text/javascript" src="js/function.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/mouseMove.js"></script>
</body>
</html>

functions.js

// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(114.368106, 30.543132), 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(114.368106, 30.543132);
// 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 markerMenu=new BMap.ContextMenu();

var rightNowRoad =function(){
    nowRoad();
};


var rightZoom = [
    {
        text:'放大',
        callback:function(){map.zoomIn()}
    },
    {
        text:'缩小',
        callback:function(){map.zoomOut()}
    }
];
for(var i=0; i < rightZoom.length; i++){
    markerMenu.addItem(new BMap.MenuItem(rightZoom[i].text,rightZoom[i].callback,100));
}

markerMenu.addItem(new BMap.MenuItem('开/关实时路况',rightNowRoad.bind(map)));

markerMenu.addItem(new BMap.MenuItem('测距',function () {getDis()}));


map.addContextMenu(markerMenu);//给标记添加右键菜单


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 transitRoute(start,end){
    document.getElementById("allmap").style.height='350px';
    var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
    transit.search(start.toString(), end.toString());
}
function drivingRoute(start,end){
    document.getElementById("allmap").style.height='350px';

    var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
    driving.search(start.toString(), end.toString());
}
function walkingRoute(start,end){
    document.getElementById("allmap").style.height='350px';
    var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
    walking.search(start.toString(), end.toString());
}
function mapstyle(){
    document.getElementById("r-result").innerHTML="";
    document.getElementById("allmap").style.height='100%';
}


//poi检索
function poisearch(regin){
    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map}
    });
    local.search(regin.toString());
}

//路况信息
var buttonValue=true;
var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例
function nowRoad(){
    if(buttonValue){
        map.addTileLayer(traffic);                    // 将图层添加到地图上

        buttonValue=!buttonValue;
        document.getElementById("btn-now-road").innerHTML="关闭路况";
    }else{
        map.removeTileLayer(traffic);                // 将图层移除
        buttonValue=!buttonValue;
        document.getElementById("btn-now-road").innerHTML="实时路况";
    }
}
function locationNow(){
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
        }
        else {
            alert('定位失败,请确认浏览器已允许网站获取定位权限');
        }
    });
}
//鼠标测距
var myDis = new BMapLib.DistanceTool(map);
var buttonDis=true;
function getDis(){

    if(buttonDis){
        myDis.open();
        document.getElementById("btn-tool-distence").innerHTML="停止测距";
        buttonDis=!buttonDis;
    }else{
        myDis.close();
        document.getElementById("btn-tool-distence").innerHTML="开始测距";
        buttonDis=!buttonDis;
    }
}

mouseMove.js

//鼠标拖拽工具箱
$(function () {
    dragPanelMove("#div-move","#btn-con");
    function dragPanelMove(downDiv,moveDiv){
        $(downDiv).mousedown(function (e) {
            var isMove = true;
            var div_x = e.pageX - $(moveDiv).offset().left;
            var div_y = e.pageY - $(moveDiv).offset().top;
            $(document).mousemove(function (e) {
                if (isMove) {
                    var obj = $(moveDiv);
                    obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
                }
            }).mouseup(
                function () {
                    isMove = false;
                });
        });

    }

});

css

body,
html,
#allmap{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0;
    font-family:"微软雅黑";
}
#div-move{
    font-weight: bold;
    font-size: 35px;
    font-family: miranafont,"Hiragino Sans GB",STXihei,"Microsoft YaHei",SimSun,sans-serif;
    cursor: move;
}
#r-result,
#r-result table{
    width:100%;
}

#btn-con{
    /*width:300px;*/
    /*height:400px;*/
    width:300px;
    height:50px;
    top:40px;
    right:40px;
    position:absolute;
    z-index:9999;
    border:2px solid yellow;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius: 20px;
    background-color:#FFFFFF;
    box-shadow:5px 5px 10px rgba(0,0,0,0.2);
    opacity:0.5;
    transition: opacity 0.4s ease-out,height 0.4s ease-out,opacity 0.4s ease,transform 0.4s ease;
    text-align:center;
    overflow: hidden;
}
#btn-con:hover{
    width:300px;
    height:400px;
    opacity:1;
    transform: translateY(4px);
    box-shadow:5px 5px 10px rgba(0,0,0,0.5);
}
.btn{
    width:80px;
    height:30px;
    border: 0;
    background: #b117c4;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius: 20px;
    color: white;
    margin-top: 8px;

    outline:none;
    position: relative; /** 相对布局 **/
}
.btn:active{
    top: 2px; /**向下偏移2px **/
}
#div-move{
    height: 50px;
}
#div-move>p{
    position: relative;
    margin-top: -60px;
    margin-right: 60px;
}
#div-move>img{
    margin-top: 5px;
    position: relative;
    margin-right: -110px;
}
#btn-search{
    width:35px;
}
#btn-now-location{
    width:60px;
}
.inp{
    width:150px;
    height:25px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius: 20px;
    border: 1px solid #DBDBDB;
    text-align:center;
    outline:none;
}
#search{
    width: 135px;
}
#changetype-sel,
#chooseRoad-sel{
    width:150px;
    height:30px;
    margin-bottom: 10px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    border-radius: 20px;
    text-align: center;
    outline:none;
}


演示

查看演示

道也者,不可须臾离者也,可离非道也。