百度地圖框選標註座標點功能

風靈使發表於2018-03-28
地圖

在百度地圖上面畫矩形，不規則多邊形，圓形，線等，並獲取框選的標註座標點功能；js判斷座標點是否在某個範圍內

MapSelect.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MapSelect.aspx.cs" Inherits="BaiduMapSelect.MapSelect" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body, html, #allmap {
            font-family: "微軟雅黑";
            height: 95%;
            margin: 0;
            overflow: hidden;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OGTkT2pvBcNb*******Skzxmm9mek"></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/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />--%>
    <%--<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/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
</head>
<body>
    <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="clearAll()" />
    <input type="button" value="獲取區域選擇的標註點集合" onclick="getOverlayPath()" />
    <script type="text/javascript">

        // 百度地圖API功能
        var map = new BMap.Map("map");
        var point = new BMap.Point(113.323685, 23.130522);
        map.centerAndZoom(point, 15);
        //map.centerAndZoom(point, 8);

        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 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); //調整視野
        };
        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>
</body>
</html>

執行結果如圖:

這裡寫圖片描述

相關文章