• 百度地图的添加图标,消除,线路图,还有信息展示


    ---恢复内容开始---

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body,
    html,
    #allmap {
    100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hKCd6ykQZB3Fk43aPenofzzISyFTkojf"></script>
    <title>设置驾车路线途经点</title>
    </head>

    <body>
    <div id="allmap"></div>
    </body>

    </html>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(112.32, 28.60), 11); //中心点
    map.enableScrollWheelZoom(true); //能否放大缩小

    var data = [{
    "createTime": "2019-04-04 13:01:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "0000000000000000",
    "s": 1,
    "y": 28.542857,
    "x": 112.34509,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:02:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "9999999999",
    "s": 1,
    "y": 28.584836,
    "x": 112.42792,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:03:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "88888888888888",
    "s": 1,
    "y": 28.566565,
    "x": 112.291665,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:04:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "7777777777",
    "s": 1,
    "y": 28.488876,
    "x": 112.354906,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:05:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "6666666666666",
    "s": 1,
    "y": 28.53509,
    "x": 112.402623,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:06:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "55555555555555",
    "s": 1,
    "y": 28.579253,
    "x": 112.403773,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:07:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "444444444444444",
    "s": 1,
    "y": 28.531536,
    "x": 112.440568,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:08:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "3333333",
    "s": 1,
    "y": 28.551844,
    "x": 112.456666,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:09:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "222222222222",
    "s": 1,
    "y": 28.558951,
    "x": 112.446892,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    },
    {
    "createTime": "2019-04-04 13:10:10",
    "updateTime": null,
    "createUser": null,
    "updateUser": null,
    "id": null,
    "e": "11111111",
    "s": 1,
    "y": 28.454329,
    "x": 112.598095,
    "g": 6,
    "xs": -5.286,
    "ys": 0.612,
    "zs": -8.427,
    "time": 1554354430042,
    "cTime": "2019-04-04 13:07:10"
    }
    ]
    var arr = [],
    tno, infoWindow, err = [],
    crr = [];
    for(var i = 0; i < data.length; i++) {
    err.push(data[i].e)
    tno = new BMap.Point(data[i].x, data[i].y) //标记点
    var marker = new BMap.Marker(tno);
    map.addOverlay(marker); //添加到页面
    if(i == 0) {
    var p1 = new BMap.Point(data[0].x, data[i].y)
    } else if(i == data.length - 1) {
    var p2 = new BMap.Point(data[i].x, data[i].y)
    } else {
    arr.push(new BMap.Point(data[i].x, data[i].y)) //排除第一条和最后一条
    }
    }
    map.addEventListener("click", handlerA.bind(this));
    var driving = new BMap.DrivingRoute(map, {
    renderOptions: {
    map: map,
    autoViewport: true //自动调整视野
    }
    });

    map.clearOverlays(arr);//删除指定的坐标点
    driving.search(p1, p2, {
    waypoints: arr
    }); //waypoints表示途经点,
    function handlerA(e) {
    var allOverlay = map.getOverlays();
    var p = e.point;
    var opts = {
    200, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title: "安全帽信息", // 信息窗口标题
    enableMessage: true //设置允许信息窗发送短息
    }
    // var push = [];
    // for(var i = 0; i<allOverlay.length;i++){
    // push.push(allOverlay[i].point)
    // if(push[i] == arr[i]){
    // map.clearOverlays(arr);
    // console.log(1)
    // }
    // }



    for(var i = 0; i < data.length-1; i++) {
    if(data[i].x.toFixed(2) == p.lng.toFixed(2) && p.lat.toFixed(2) == data[i].y.toFixed(2)) {
    var infoWindow = new BMap.InfoWindow(data[i].e, opts)
    map.openInfoWindow(infoWindow, p); //开启信息窗口
    }
    }



    }
    </script>

    ---恢复内容结束---

  • 相关阅读:
    C#设置窗体最大化且不遮挡任务栏的方法
    C# Base64解码 二进制输出
    导出Excel并下载,但无法定制样式的方法!
    C# List 转Datatable
    查询sql语句耗时的方法!
    301跳转
    文章关键字加链接
    文本框样式默认文本
    JForum二次开发(一)
    MongoDB 学习笔记(三)—— 修改器的使用
  • 原文地址:https://www.cnblogs.com/bohao9625/p/10688082.html
Copyright © 2020-2023  润新知