2018-12-05 百度地图API的调用

关于百度地图API的调用
1.引用百度API，注册自己的key

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=h3vKREEs4sNt2YKxk9ZB0TZ0"></script>

    <%--使用LuShu2，LuShu.js不可，图形不会跟随方向转--%>
    <script src="../../CommonNew/js/LuShu2.js" type="text/javascript"></script>

2.添加到页面上

<div id="map_canvas"></div>

3.对地图的操作

<script type="text/javascript">
                var winWidth = 0;
                var winHeight = 0;
                function findDimensions() { //函数：获取尺寸
                    //获取窗口宽度
                    if (window.innerWidth) {
                        winWidth = window.innerWidth;
                    }
                    else if ((document.body) && (document.body.clientWidth)) {
                        winWidth = document.body.clientWidth;
                    }

                    //获取窗口高度
                    if (window.innerHeight) {
                        winHeight = window.innerHeight;
                    }
                    else if ((document.body) && (document.body.clientHeight)) {
                        winHeight = document.body.clientHeight;
                    }

                    //通过深入Document内部对body进行检测，获取窗口大小
                    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                        winHeight = document.documentElement.clientHeight;
                        winWidth = document.documentElement.clientWidth;
                    }

                    //设置div的具体宽度=窗口的宽度的%
                    if (document.getElementById("map_canvas")) {
                        //document.getElementById("map").style.width = winWidth*0.98 + "px";
                        document.getElementById("map_canvas").style.height = winHeight * 0.98 + "px";
                    }
                }


                findDimensions();
                window.onresize = findDimensions;

                var map = new BMap.Map('map_canvas');
                map.enableScrollWheelZoom();
                map.centerAndZoom(new BMap.Point(116.403847, 39.915526), 5);     // 初始化地图,设置中心点坐标和地图级别
                var lushu;
                var arrPois = []; //坐标点数组
                var markPois = []; //坐标点显示信息窗数组

                function GetLuShu() {
                    map.clearOverlays();
                    lushu = new BMapLib.LuShu(map, arrPois, {
                        defaultContent: "test", //"从天安门到百度大厦"
                        autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                        icon: new BMap.Icon('../../Common/Image/icon_track_car.png', new BMap.Size(40, 20), { anchor: new BMap.Size(27, 13) }),
                        speed: 8000,
                        enableRotation: true, //是否设置marker随着道路的走向进行旋转
                        landmarkPois: markPois
                    });
                    map.addOverlay(new BMap.Polyline(arrPois, { strokeColor: '#111' }));
                    map.setViewport(arrPois); //根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
                    //lushu.start();
                }

                // 定义一个开始轨迹回放控件类,即function
                function StartControl() {
                    // 默认停靠位置和偏移量
                    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
                    this.defaultOffset = new BMap.Size(130, 10);
                }

                // 通过JavaScript的prototype属性继承于BMap.Control
                StartControl.prototype = new BMap.Control();

                // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
                // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
                StartControl.prototype.initialize = function(map) {
                    // 创建一个DOM元素
                    var div = document.createElement("divStart");
                    // 添加文字说明
                    div.appendChild(document.createTextNode("开始"));
                    // 设置样式
                    div.style.fontSize = "14px";
                    div.style.padding = "2px";
                    div.style.color = "white";
                    div.style.cursor = "pointer";
                    div.style.border = "1px solid gray";
                    div.style.backgroundColor = "#1e90ff";
                    div.style.right = "100px";
                    div.style.borderRadius = "6px";
                    // 绑定开始事件
                    div.onclick = function(e) {
                        lushu.start();
                        lushu.showInfoWindow();
                    }
                    // 添加DOM元素到地图中
                    map.getContainer().appendChild(div);
                    // 将DOM元素返回
                    return div;
                }

                // 定义一个暂停轨迹回放控件类,即function
                function StopControl() {
                    // 默认停靠位置和偏移量
                    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
                    this.defaultOffset = new BMap.Size(90, 10);
                }

                // 通过JavaScript的prototype属性继承于BMap.Control
                StopControl.prototype = new BMap.Control();

                // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
                // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
                StopControl.prototype.initialize = function(map) {
                    // 创建一个DOM元素
                    var div = document.createElement("divStop");
                    // 添加文字说明
                    div.appendChild(document.createTextNode("暂停"));
                    // 设置样式
                    div.style.fontSize = "14px";
                    div.style.padding = "2px";
                    div.style.color = "white";
                    div.style.cursor = "pointer";
                    div.style.border = "1px solid gray";
                    div.style.backgroundColor = "#d81e06";
                    div.style.right = "50px";
                    div.style.borderRadius = "6px";
                    // 绑定开始事件
                    div.onclick = function(e) {
                        lushu.pause();
                    }
                    // 添加DOM元素到地图中
                    map.getContainer().appendChild(div);
                    // 将DOM元素返回
                    return div;
                }

                // 定义一个暂停轨迹回放控件类,即function
                function RestartControl() {
                    // 默认停靠位置和偏移量
                    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
                    this.defaultOffset = new BMap.Size(20, 10);
                }

                // 通过JavaScript的prototype属性继承于BMap.Control
                RestartControl.prototype = new BMap.Control();

                // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
                // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
                RestartControl.prototype.initialize = function(map) {
                    // 创建一个DOM元素
                    var div = document.createElement("divRestart");
                    // 添加文字说明
                    div.appendChild(document.createTextNode("重新开始"));
                    // 设置样式
                    div.style.padding = "2px";
                    div.style.fontSize = "14px";
                    div.style.color = "white";
                    div.style.cursor = "pointer";
                    div.style.border = "1px solid gray";
                    div.style.backgroundColor = "#0b988f";
                    div.style.borderRadius = "6px";
                    // 绑定开始事件
                    div.onclick = function(e) {
                        lushu.stop();
                        lushu.start();
                    }
                    // 添加DOM元素到地图中
                    map.getContainer().appendChild(div);
                    // 将DOM元素返回
                    return div;
                }

                map.addControl(new BMap.NavigationControl());
                // 将自定义控件添加到地图当中
                map.addControl(new StartControl());
                // 将自定义控件添加到地图当中
                map.addControl(new StopControl());
                // 将自定义控件添加到地图当中
                map.addControl(new RestartControl());
        </script>