百度地图相关工具

男娘i 2021-11-22 05:16 330阅读 0赞

<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="鼠标测距" οnclick="openDis()">
        <input type="button" value="清除所有覆盖物" οnclick="clearAll()" />
        <input type="button" value="获取区域选择的标注点集合" οnclick="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>

转载于:https://www.cnblogs.com/caoxen/p/11201142.html