百度地图点、线、箭头

2020-02-24 18:58:32

参考地址 百度地图点、线、箭头

线:
<!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" />
        <style type="text/css">
            body, html,#allmap {width: 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=cxxxx59xxxxAyigxxxx"></script>
        <title>连线</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("郑州",5);  //初始化地图,设置城市和地图级别。
    map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    //map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开
    
    var lineList = [
        { title: "1", pointA: "116.364531,40.057003",pointB: "118.79687,32.06025"},
        { title: "2",pointA: "91.14085,29.64555",pointB: "102.71,25.0458"},
        { title: "3", pointA: "120.58531,31.29888",pointB: "126.53496,45.80377"},
        { title: "4", pointA: "101.77822,36.61714",pointB: "118.08942,24.47983"}
    ];
    
    if(lineList.length == 0){
        var pointA = new BMap.Point('','');  
        var pointB = new BMap.Point('','');  
        var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});  //定义折线
        map.addOverlay(polyline);     //添加折线到地图上
    }else{
        for (var i = 0; i < lineList.length; i++) {
            if(isNaN(lineList[i].pointA) && isNaN(lineList[i].pointB) && lineList[i].pointA.indexOf(',') > -1 && lineList[i].pointB.indexOf(',') > -1 ){
                var pAJ = lineList[i].pointA.split(",")[0];
                var pAW = lineList[i].pointA.split(",")[1];
                var pBJ = lineList[i].pointB.split(",")[0];
                var pBW = lineList[i].pointB.split(",")[1];
                var pointA = new BMap.Point(pAJ,pAW); 
                var pointB = new BMap.Point(pBJ,pBW); 
                var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); 
                map.addOverlay(polyline);
            }
        }
    }
</script>


 点:
<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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap{height:500px;width:100%;}
            #r-result{width:100%; font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=csnx5xxxawttrxxxxx"></script>
        <title>标注</title>
    </head>
    <body>
        <div id="allmap" ></div>
    </body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("郑州",5);  //初始化地图,设置城市和地图级别。
    map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    //var points = [];
    //points.push(new BMap.Point(116.331398, 39.897445));
    //points.push(new BMap.Point(108.312241, 22.787823));
    //points.push(new BMap.Point(110.312241, 22.787823));
    var points = [
        { title: "1", pointA: "116.364531,40.057003"},
        { title: "2",pointA: "91.14085,29.64555"},
        { title: "3", pointA: "120.58531,31.29888"},
        { title: "4", pointA: "101.77822,36.61714"}
    ];
    //用经纬度设置地图中心点
    map.clearOverlays();
    
    for (i = 0; i < points.length; i++) {
        //var point = points[i];
        var pAJ = points[i].pointA.split(",")[0];
        var pAW = points[i].pointA.split(",")[1];
        var point = new BMap.Point(pAJ,pAW);
         
        var marker = new BMap.Marker(point); // 创建标注
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 
        map.addOverlay(marker); // 将标注添加到地图中
        var opts = {
            width : 200, // 信息窗口宽度
            height : 100, // 信息窗口高度
            title : "车辆信息", // 信息窗口标题
            enableMessage : true, //设置允许信息窗发送短息
            message : "车辆在途跟踪!"
        }
        var infoWindow = new BMap.InfoWindow("车牌号:  <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
        marker.addEventListener("mouseover", (function (info, po) {
            return function(){
                map.openInfoWindow(info, po); //开启信息窗口
            }
        })(infoWindow, point));
    }
</script>


箭头: 
<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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap{height:500px;width:100%;}
            #r-result{width:100%; font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=csxxx9GxxxxxVZ0xx"></script>
        <title>城市名定位</title>
    </head>
    <body>
        <div id="allmap" ></div>
        <div id="r-result">
            经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
            纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
            <input type="button" value="查询" onclick="theLocation()" />
        </div>
    </body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 11);
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom(true);
    var points = [];
    points.push(new BMap.Point(116.331398, 39.897445));
    points.push(new BMap.Point(108.312241, 22.787823));
    points.push(new BMap.Point(110.312241, 22.787823));
    
    var polyline = new BMap.Polyline(points, {
        strokeColor : "red", //设置颜色
        strokeWeight : 3, //宽度
        strokeOpacity : 0.5
    }); //透明度
    
    
    // 用经纬度设置地图中心点
    function theLocation() {
        map.clearOverlays();
        
        for (i = 0; i < points.length; i++) {
            //var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
            var point = points[i];
            
            var marker = new BMap.Marker(point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            var opts = {
                width : 200, // 信息窗口宽度
                height : 100, // 信息窗口高度
                title : "车辆信息", // 信息窗口标题
                enableMessage : true, //设置允许信息窗发送短息
                message : "车辆在途跟踪!"
            }
            var infoWindow = new BMap.InfoWindow("车牌号:  <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
            marker.addEventListener("click", (function (info, po) {
                return function(){
                    map.openInfoWindow(info, po); //开启信息窗口
                }
            })(infoWindow, point));
        }
        //alert(map.getDistance(new BMap.Point(108.312241,22.787823),new BMap.Point(116.323308,24.811744)));
        if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") {
            var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
            var marker = new BMap.Marker(new_point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            map.panTo(new_point);
            var opts = {
                width : 200, // 信息窗口宽度
                height : 100, // 信息窗口高度
                title : "车辆信息", // 信息窗口标题
                enableMessage : true, //设置允许信息窗发送短息
                message : "车辆在途跟踪!"
            }
            var infoWindow = new BMap.InfoWindow("车牌号:  <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
                marker.addEventListener("click", function () {
                map.openInfoWindow(infoWindow, new_point); //开启信息窗口
            });
        }
        map.addOverlay(polyline);
        addArrow(polyline, 50, Math.PI / 7);
    }
    
    function addArrow(polyline, length, angleValue) { //绘制箭头的函数
        var linePoint = polyline.getPath(); //线的坐标串
        var arrowCount = linePoint.length;
        for (var i = 1; i < arrowCount; i++) { //在拐点处绘制箭头
            var pixelStart = map.pointToPixel(linePoint[i - 1]);
            var pixelEnd = map.pointToPixel(linePoint[i]);
            var angle = angleValue; //箭头和主线的夹角
            var r = length; // r/Math.sin(angle)代表箭头长度
            var delta = 0; //主线斜率,垂直时无斜率
            var param = 0; //代码简洁考虑
            var pixelTemX,
            pixelTemY; //临时点坐标
            var pixelX,
            pixelY,
            pixelX1,
            pixelY1; //箭头两个点
            if (pixelEnd.x - pixelStart.x == 0) { //斜率不存在是时
                pixelTemX = pixelEnd.x;
                if (pixelEnd.y > pixelStart.y) {
                    pixelTemY = pixelEnd.y - r;
                } else {
                    pixelTemY = pixelEnd.y + r;
                }
                //已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法
                pixelX = pixelTemX - r * Math.tan(angle);
                pixelX1 = pixelTemX + r * Math.tan(angle);
                pixelY = pixelY1 = pixelTemY;
            } else {   //斜率存在时
                delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x);
                param = Math.sqrt(delta * delta + 1);
                
                if ((pixelEnd.x - pixelStart.x) < 0) {   //第二、三象限
                    pixelTemX = pixelEnd.x + r / param;
                    pixelTemY = pixelEnd.y + delta * r / param;
                } else {    //第一、四象限
                    pixelTemX = pixelEnd.x - r / param;
                    pixelTemY = pixelEnd.y - delta * r / param;
                }
                //已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法
                pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
                pixelY = pixelTemY - Math.tan(angle) * r / param;
                
                pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;
                pixelY1 = pixelTemY + Math.tan(angle) * r / param;
            }
            
            var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY));
            var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1));
            var Arrow = new BMap.Polyline([
                pointArrow,
                linePoint[i],
                pointArrow1
            ], {
                strokeColor : "blue",
                strokeWeight : 3,
                strokeOpacity : 0.5
            });
            map.addOverlay(Arrow);
        }
    }
</script>


  • 2021-01-13 13:36:29

    shortid nodejs短id生成器

    短ID在实际运用中很广泛, 其中比较典型的运用就是短地址。 市面上肯定有不少开源的生成短ID库, 基于node.js的估计也不少。 鉴于本人已然是node.js的脑残粉(本职java开发), 很多业余项目从前端到后端都基于javascript开发, 加上npm和bower的包管理以及grunt的打包工具, 在项目开发过程中体验特别酸爽。 由于当时项目前后端都会用到短ID, 但没找到合适的库同时支持npm和bower的(可能孤陋寡闻). 因此自己乐此不疲地又造了个轮子js-shortid(夷,为什么会说又呢?!). 下面主要介绍它的实现方案, 自认为比较优雅简洁。

  • 2021-01-13 17:23:21

    CREATE TABLE 表名 AS SELECT 语句 快速复制表但是锁表

    注意Table2的主键约束,如果Table2有主键而且不为空,则 field1, field2…中必须包括主键 在执行语句的时候,MySQL是逐行加锁的(扫描一个锁一个),直至锁住所有符合条件的数据,执行完毕才释放锁。所以当业务在进行的时候,切忌使用这种方法。 在RR隔离级别下,还会加行锁和间隙锁

  • 2021-01-13 17:27:04

    Navicat配置mysql数据库用户权限

    用数据库的时候就会遇到有多个用户,分配用户权限的情况,有些用户只读,有些用户可以读写,有些用户只能操作一个或者多个数据库,如何给mysql的用户设置权限,我这里描述一下如何用navicat图形操作分配用户权限

  • 2021-01-14 06:15:04

    通过glide获取图片显示后的真正宽高

    有时候需要获取网络图片的宽高来设置图片显示的大小,很多人会直接利用Glide的加载监听去拿图片的宽高,但是这样拿到的不是图片真正的宽高,而是图片显示在ImageView后的宽高。如下:

  • 2021-01-14 09:38:57

    Chrome插件详细教程

    严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension),真正意义上的Chrome插件是更底层的浏览器功能扩展,可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯,本文也全部采用这种叫法,但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

  • 2021-01-14 17:07:51

    chrome.contextMenus.create不出现菜单

    主要原因是,我每次刷新玩,都复制一下右键,然而并没有出现菜单,一度颓废啊,因为demo,还有其他人的文章都是这样的。 哎,后来发现是这样的,我缺少了contexts选项。其实我是成功了,我现在只要不选择文字,直接点右键,菜单已经出现了哦。

  • 2021-01-15 13:06:08

    监控 MongoDB -

    随着MongoDB中保存的数据越来越多,对MongoDB服务状态的监控也越来越重要,经常关注服务是否健康,才能防止故障以及优化。