当前位置:网站首页 / 个人 / 正文

基于百度地图定位目标的沙雕玩意 不过还是蛮有意思的

时间:2019年03月22日 | 作者 : admin | 分类 : 个人 | 浏览: 1068次 | 评论 0

最初是由于一个想法(稍后再讲)后来验证了一下 可以大概的定位出目标的所在位置。。

以下是思路:

    最初的想法是通过至少2个已知与目标位置的距离和当前位置的坐标点,然后通过百度地图对已知坐标进行标记、画直线(测距)之后通过PS 画距离半径,N个圆圈的相交点就大概是目标的所在位置(一般定位会有偏差)。

    实验开始前需要知道的数据【以下数据均为测试数据】:A(定位目标)B(我) C(辅助)

        A:假设定位目标在重庆大学

        B:与A的距离相差1447.3公里、B当前所处位置-河北工业大学

        C:与A的距离相差1458.2公里、C当前所处位置-北京南站

首先 标记好B、C的位置,并测距画直线 【往哪个方向都可以】

1.png

第二部画圆,大小是本身到目标距离点(半径)

2.png

这样就可以放大查看了,,,,,,,虽然写的有点沙雕 有兴趣的可以再继续优化,【需要申请百度地图的key】

虽然有较大的偏移。可能是画线问题,也可能是距离较大的问题 。。。。。

image.png



代码

<!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>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:95%;margin:0px;padding:0px}
        #container{height:100%}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图申请的KEY">
        //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
</head>

<body>
<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="container"></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

<script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 11);
    // 初始化地图,设置中心点坐标和地图级别
    //开启鼠标滚动功能
    map.enableScrollWheelZoom(true);
    //添加控件
    map.addControl(new BMap.NavigationControl());
    //调整风格
    map.setMapStyle({
        styleJson:[
            {
                "featureType": "land",
                "elementType": "geometry",
                "stylers": {
                    "color": "#212121"
                }
            },
            {
                "featureType": "building",
                "elementType": "geometry",
                "stylers": {
                    "color": "#2b2b2b"
                }
            },
            {
                "featureType": "highway",
                "elementType": "all",
                "stylers": {
                    "lightness": -42,
                    "saturation": -91
                }
            },
            {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -77,
                    "saturation": -94
                }
            },
            {
                "featureType": "green",
                "elementType": "geometry",
                "stylers": {
                    "color": "#1b1b1b"
                }
            },
            {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": {
                    "color": "#181818"
                }
            },
            {
                "featureType": "subway",
                "elementType": "geometry.stroke",
                "stylers": {
                    "color": "#181818"
                }
            },
            {
                "featureType": "railway",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -52
                }
            },
            {
                "featureType": "all",
                "elementType": "labels.text.stroke",
                "stylers": {
                    "color": "#313131"
                }
            },
            {
                "featureType": "all",
                "elementType": "labels.text.fill",
                "stylers": {
                    "color": "#8b8787"
                }
            },
            {
                "featureType": "manmade",
                "elementType": "geometry",
                "stylers": {
                    "color": "#1b1b1b"
                }
            },
            {
                "featureType": "local",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -75,
                    "saturation": -91
                }
            },
            {
                "featureType": "subway",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -65
                }
            },
            {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                    "lightness": -40
                }
            },
            {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                    "color": "#8b8787",
                    "weight": "1",
                    "lightness": -29
                }
            }
        ]
    });
    var myDis = new BMapLib.DistanceTool(map);
    //距离测量
    function Juli(){
        // 设置默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(60, 10);
    }
    Juli.prototype = new BMap.Control();
    Juli.prototype.initialize = function(maps){
        // 创建一个DOM元素
        var div = document.createElement("div");
        // 添加文字说明
        div.appendChild(document.createTextNode("测距标记"));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid gray";
        div.style.backgroundColor = "#ffffff";
        // 绑定事件,点击一次放大两级
        div.onclick = function(e){
            myDis.open();
        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    };
    //清除标记
    function Biaoji(){
        // 设置默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(150, 10);
    }
    Biaoji.prototype = new BMap.Control();
    Biaoji.prototype.initialize = function(maps){
        // 创建一个DOM元素
        var div = document.createElement("div");
        // 添加文字说明
        div.id="dddddddddd";
        div.appendChild(document.createTextNode("清除所有覆盖物"));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid gray";
        div.style.backgroundColor = "#ffffff";
        // 绑定事件,点击一次放大两级
        div.onclick = function(e){
            map.clearOverlays();
        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    };

    // 创建控件实例
    // 添加到地图当中
    map.addControl(new Biaoji());
    map.addControl(new Juli());
    var geolocation = new BMap.Geolocation();
    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时,圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度,以像素为单位。
        strokeOpacity: 0.8,    //边线透明度,取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度,取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式,solid或dashed。
    };

    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });


    //检索
    function G(id) {
        return document.getElementById(id);
    }
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });
    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace(){
        //map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>
</body>
</html>


推荐您阅读更多有关于“教程分享,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类
搜索
友情链接
Top