map百度地圖複製粘貼即可使用

原創
2020-02-24 06:47
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Track</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
    <script type="text/javascript">
        //獲取所有點的座標
        var points = [
            new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),
            new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),
            new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),
            new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),
            new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),
            new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)
        ];

        var map;   //百度地圖對象
        var car;   //汽車圖標
        var label; //信息標籤
        var centerPoint;

        var timer;     //定時器
        var index = 0; //記錄播放到第幾個point

        var followChk, playBtn, pauseBtn, resetBtn; //幾個控制按鈕

        function init() {
            followChk = document.getElementById("follow");
            playBtn = document.getElementById("play");
            pauseBtn = document.getElementById("pause");
            resetBtn = document.getElementById("reset");

            //初始化地圖,選取第一個點爲起始點
            map = new BMap.Map("container");
            map.centerAndZoom(points[0], 15);
            map.enableScrollWheelZoom();
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl({isOpen: true}));

            //通過DrivingRoute獲取一條路線的point
            var driving = new BMap.DrivingRoute(map);
            driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));
            driving.setSearchCompleteCallback(function() {
                //得到路線上的所有point
                points = driving.getResults().getPlan(0).getRoute(0).getPath();
                //畫面移動到起點和終點的中間
                centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
                map.panTo(centerPoint);
                //連接所有點
                map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));

                var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(150,100));

                //顯示小車子
                label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
                car = new BMap.Marker(points[0],{icon:myIcon});
                car.setLabel(label);
                map.addOverlay(car);

                //點亮操作按鈕
                playBtn.disabled = false;
                resetBtn.disabled = false;
            });
        }

        function play() {
            playBtn.disabled = true;
            pauseBtn.disabled = false;

            var point = points[index];
            if(index > 0) {
                map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
            }
            label.setContent("經度: " + point.lng + "<br>緯度: " + point.lat);
            car.setPosition(point);
            index++;
            if(followChk.checked) {
                map.panTo(point);
            }
            if(index < points.length) {
                timer = window.setTimeout("play(" + index + ")", 200);
            } else {
                playBtn.disabled = true;
                pauseBtn.disabled = true;
                map.panTo(point);
            }
        }

        function pause() {
            playBtn.disabled = false;
            pauseBtn.disabled = true;

            if(timer) {
                window.clearTimeout(timer);
            }
        }

        function reset() {
            followChk.checked = false;
            playBtn.disabled = false;
            pauseBtn.disabled = true;

            if(timer) {
                window.clearTimeout(timer);
            }
            index = 0;
            car.setPosition(points[0]);
            map.panTo(centerPoint);
        }
    </script>
</head>

<body οnlοad="init();">
<div id="controller" align="center">
    <input id="follow" type="checkbox"><span style="font-size:12px;">畫面跟隨</span></input>
    <input id="play" type="button" value="播放" οnclick="play();" disabled />
    <input id="pause" type="button" value="暫停" οnclick="pause();" disabled />
    <input id="reset" type="button" value="重置" οnclick="reset()" disabled />
</div>
<div id="container"></div>
</body>
</html>

<!--//https://www.cnblogs.com/grimm/p/5087903.html-->
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
map百度地圖複製粘貼即可使用

dubbo轉載

getResourceAsStream 空指針

springSecurity login 404 ,rbac不走

nginx.conf

zookeeper的下載，安裝和啓動

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

map百度地圖 複製粘貼即可使用

map百度地圖複製粘貼即可使用
