当你的才华还撑不起你的梦想时,你只能一直前进!

百度地图相关工具

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>覆盖物
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>marker
<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>路书工具
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>多边形绘制工具
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></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" />
<div id="allmap" style="overflow: hidden; position: relative; zoom: 1;">
        <div id="map" style="-webkit-transition: all 0.5s ease-in-out; height: 95%; transition: all 0.5s ease-in-out;">
        </div>
    </div>
    <input type="button" value="鼠标测距" onclick="openDis()">
    <input type="button" value="清除所有覆盖物" onclick="clearAll()" />
    <input type="button" value="获取区域选择的标注点集合" onclick="getOverlayPath()" />
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });
        var point = new BMap.Point(112.86, 35.507);
        map.centerAndZoom(point, 15);


        var scaleControl = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        }); // 左下角,添加比例尺
        map.addControl(scaleControl)


        //鼠标测距
        var myDis = new BMapLib.DistanceTool(map);
        map.addControl(myDis)

        // map.addEventListener("load", function () {
        //     myDis.open(); //开启鼠标测距
        //     //myDis.close();  //关闭鼠标测距
        // });
        function openDis() {//开启鼠标测距
            myDis.open();
        }




        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // 编写自定义函数,创建标注
        function addMarker(point, id) {
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            addClickHandler("id为:" + id, marker);
        }

        var opts = {
            width: 100, // 信息窗口宽度
            height: 80, // 信息窗口高度
            title: "信息窗口", // 信息窗口标题
            enableMessage: false //设置允许信息窗发送短息
        };

        function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                openInfo(content, e);
            });
        }

        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }

        // 随机向地图添加25个标注
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        var lngSpan = Math.abs(sw.lng - ne.lng);
        var latSpan = Math.abs(ne.lat - sw.lat);
        var allPointArray = [];
        var markers = [];
        for (var i = 0; i < 20; i++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() *
                0.7));
            allPointArray.push({
                Point: point,
                Id: i
            });
            addMarker(point, i);

            //markers.push(point);
        }

        //最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
        //var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
        var b = {}

        function aa(pointArray) {
            var polygonPoints = "";
            for (var i = 0; i < pointArray.length; i++) {
                // if (i == 0) getFencePosition(pointArray[i].lng, pointArray[i].lat); // 获取围栏地理位置
                polygonPoints = polygonPoints + pointArray[i].lng + "," + pointArray[i].lat + ";";
            }
            b.aaa = polygonPoints
        }
        var overlays = [];
        var overlaycomplete = function (e) {
            clearAll();
            overlays.push(e.overlay);
            e.overlay.enableEditing();
            e.overlay.addEventListener("lineupdate", function (e) {
                showLatLon(e.currentTarget);
            });
            var pointArray = e.overlay.getPath();
            map.setViewport(pointArray); //调整视野

            aa(pointArray)
        };
        var styleOptions = {
            strokeColor: "red", //边线颜色。
            fillColor: "red", //填充颜色。当参数为空时,圆形将没有填充效果。
            strokeWeight: 2, //边线的宽度,以像素为单位。
            strokeOpacity: 0.5, //边线透明度,取值范围0 - 1。
            fillOpacity: 0.3, //填充的透明度,取值范围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 //矩形的样式
        });
        //添加鼠标绘制工具监听事件,用于获取绘制结果
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);

        function clearAll() {
            for (var i = 0; i < overlays.length; i++) {
                map.removeOverlay(overlays[i]);
            }
            overlays.length = 0;
        }

        function getOverlayPath() {
            var box = overlays[overlays.length - 1];
            var pointArray = box.getPath();
            map.setViewport(pointArray); //调整视野

            var bound = map.getBounds(); //地图可视区域
            var s = "圈选的ID有:";
            for (var i = 0; i < allPointArray.length; i++) {
                if (bound.containsPoint(allPointArray[i].Point) == true) {
                    if (isInsidePolygon(allPointArray[i].Point, pointArray))
                        s += allPointArray[i].Id + ",";
                }
            }
            alert(s);
        }

        var overlaysCache = [];

        function showLatLon(a) {
            var len = a.length;
            var arr = [];
            for (var i = 0; i < len - 1; i++) {
                arr.push([a[i].lng, a[i].lat]);
            }
            this.overlaysCache = arr;
        }

        //判断一个标注点是否在多边形里
        //pt标注点,poly多边形数组
        function isInsidePolygon(pt, poly) {
            for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
                ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i]
                    .lng) &&
                (c = !c);
            return c;
        }
    </script>

 

posted @ 2019-07-17 15:06  One'-_-'Piece  阅读(419)  评论(0编辑  收藏  举报