在自定义叠加图像上使用Drawing Manager

时间：2015-05-20 01:57:01

标签： html css google-maps-api-3

我想在叠加图像的顶部使用绘图管理器到目前为止，我只能通过切换div顺序使用一个，但我想在一个地图中使用所有功能，如果可能的话，任何帮助都将受到赞赏。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <meta name="description" content="Centro Estratégico de Vigilancia Aérea y Marítima Honduras">
    <meta name="author" content="1RDS-PAMT">
    <title>AIR MAP HND</title>
    <link rel="shortcut icon" href="../images/cevamicon.ico">

    <style>
      html, body, #map-canvas, #map {   
        height: 99.9%;
        margin: 0px;
        padding: 0px;
      }

      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        font-family: Arial, sans-serif;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

     #drawPanel {
        position: absolute;
        width: 200px;
        font-family: Arial, sans-serif;
        font-size: 13px;
        float: left;
        margin-top: 5px;
        margin-left: 200px;
        z-index: 5;
     }

     #color-palette {
        clear: both;
     }

     .color-button {
        width: 20px;
        height: 20px;
        font-size: 0;
        margin: 2px;
        float: left;
        cursor: pointer;
     }

     #delete-button {
        margin-top: 0px;
        margin-left: 22px;
     }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
    <script>

// This adds a UI control allowing users to remove the ground overlay from the map.
// and build color palette and delete selected shapes and markers.

        var airOverlay;
        var mapp;
        var drawingManager;
        var selectedShape;
        var colors = ['#1E90FF', '#FF0000', '#32CD32', '#FFA500', '#000000', '#FFFF00'];
        var selectedColor;
        var colorButtons = {};

        function clearSelection () {
            if (selectedShape) {
                if (selectedShape.type !== 'marker') {
                    selectedShape.setEditable(false);
                }

                selectedShape = null;
            }
        }

        function setSelection (shape) {
            if (shape.type !== 'marker') {
                clearSelection();
                shape.setEditable(true);
                selectColor(shape.get('fillColor') || shape.get('strokeColor'));
            }

            selectedShape = shape;
        }

        function deleteSelectedShape () {
            if (selectedShape) {
                selectedShape.setMap(null);
            }
        }

        function selectColor (color) {
            selectedColor = color;
            for (var i = 0; i < colors.length; ++i) {
                var currColor = colors[i];
                colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
            }

        // Retrieves the current options from the drawing manager and replaces the
        // stroke or fill color as appropriate.
            var polylineOptions = drawingManager.get('polylineOptions');
            polylineOptions.strokeColor = color;
            drawingManager.set('polylineOptions', polylineOptions);

            var rectangleOptions = drawingManager.get('rectangleOptions');
            rectangleOptions.fillColor = color;
            drawingManager.set('rectangleOptions', rectangleOptions);

            var circleOptions = drawingManager.get('circleOptions');
            circleOptions.fillColor = color;
            drawingManager.set('circleOptions', circleOptions);

            var polygonOptions = drawingManager.get('polygonOptions');
            polygonOptions.fillColor = color;
            drawingManager.set('polygonOptions', polygonOptions);
        }

        function setSelectedShapeColor (color) {
            if (selectedShape) {
                if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
                    selectedShape.set('strokeColor', color);
                } else {
                    selectedShape.set('fillColor', color);
                }
            }
        }

        function makeColorButton (color) {
            var button = document.createElement('span');
            button.className = 'color-button';
            button.style.backgroundColor = color;
            google.maps.event.addDomListener(button, 'click', function () {
                selectColor(color);
                setSelectedShapeColor(color);
            });

            return button;
        }

        function buildColorPalette () {
            var colorPalette = document.getElementById('color-palette');
            for (var i = 0; i < colors.length; ++i) {
                var currColor = colors[i];
                var colorButton = makeColorButton(currColor);
                colorPalette.appendChild(colorButton);
                colorButtons[currColor] = colorButton;
            }
            selectColor(colors[0]);
        }

        function initialize() {

            var honduras = new google.maps.LatLng(14.888522, -87.150924);
            var imageBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(12.850803, -89.547900),
                new google.maps.LatLng(16.668892, -83.002123));

            var mapOptions = {
                zoom: 8,
                center: honduras,
                disableDefaultUI: true,
                mapTypeControl: true,
                zoomControl: true
            };

            mapp = new google.maps.Map(document.getElementById('map-canvas'), 
                mapOptions);

            airOverlay = new google.maps.GroundOverlay('../overlayImg/airmap.png', imageBounds);

            addOverlay();

            var map = new google.maps.Map(document.getElementById('map'),
                mapOptions);

            var polyOptions = {
                strokeWeight: 0,
                fillOpacity: 0.45,
                editable: true,
                draggable: true
            };

        // Creates a drawing manager attached to the map that allows the user to draw
        // markers, lines, and shapes.
            drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.POLYGON,
                markerOptions: {
                    draggable: true,
                },

                polylineOptions: {
                    editable: true,
                    draggable: true
                },

                rectangleOptions: polyOptions,
                circleOptions: polyOptions,
                polygonOptions: polyOptions,
                map: map
            });

            google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
                var newShape = e.overlay;

                newShape.type = e.type;

                if (e.type !== google.maps.drawing.OverlayType.MARKER) {
                    // Switch back to non-drawing mode after drawing a shape.
                    drawingManager.setDrawingMode(null);

                    // Add an event listener that selects the newly-drawn shape when the user
                    // mouses down on it.
                    google.maps.event.addListener(newShape, 'click', function (e) {
                        if (e.vertex !== undefined) {
                            if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
                                var path = newShape.getPaths().getAt(e.path);
                                path.removeAt(e.vertex);
                                if (path.length < 3) {
                                    newShape.setMap(null);
                                }
                            }
                            if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
                                var path = newShape.getPath();
                                path.removeAt(e.vertex);
                                if (path.length < 2) {
                                    newShape.setMap(null);
                                }
                            }
                        }
                        setSelection(newShape);
                    });
                        setSelection(newShape);
                } else {
                    google.maps.event.addListener(newShape, 'click', function (e) {
                        setSelection(newShape);
                    });
                    setSelection(newShape);
                }
            });

            // Clear the current selection when the drawing mode is changed, or when the
            // map is clicked.
            google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
            google.maps.event.addListener(map, 'click', clearSelection);
            google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

            buildColorPalette();

        }

        function addOverlay() {
            airOverlay.setMap(mapp);
        }

        // [START region_removal]
        function removeOverlay() {
            airOverlay.setMap(null);
        }
        // [END region_removal]

        function setOpacity() {
            var opacityStr = document.getElementById('opacity').value;
            var opacity = parseFloat(opacityStr);
            airOverlay.setOpacity(opacity);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>

<body>

    <div id="drawPanel">
            <div id="color-palette"></div>
            <div>
                <button id="delete-button">Borrar Selección</button>
            </div>
        </div>
        <div id="panel">
            <input onclick="removeOverlay();" type=button value="Remover overlay">
            <input onclick="addOverlay();" type=button value="Restaurar overlay">
            <input type="text" id="opacity" value="0.5"></input>
            <input type="button" value="Transparencia" onclick="setOpacity();"></input>
        </div>
        <div id="map-canvas"></div>
        <div id="map"></div>
    </body>

</html>

1 个答案:

答案 0 :(得分：1)

您需要删除第二张地图，将叠加层和绘图管理器添加到同一张地图。

proof of concept fiddle

工作代码段：

// This adds a UI control allowing users to remove the ground overlay from the map.
// and build color palette and delete selected shapes and markers.

var airOverlay;
var mapp;
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF0000', '#32CD32', '#FFA500', '#000000', '#FFFF00'];
var selectedColor;
var colorButtons = {};

function clearSelection() {
    if (selectedShape) {
        if (selectedShape.type !== 'marker') {
            selectedShape.setEditable(false);
        }

        selectedShape = null;
    }
}

function setSelection(shape) {
    if (shape.type !== 'marker') {
        clearSelection();
        shape.setEditable(true);
        selectColor(shape.get('fillColor') || shape.get('strokeColor'));
    }

    selectedShape = shape;
}

function deleteSelectedShape() {
    if (selectedShape) {
        selectedShape.setMap(null);
    }
}

function selectColor(color) {
    selectedColor = color;
    for (var i = 0; i < colors.length; ++i) {
        var currColor = colors[i];
        colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
    }

    // Retrieves the current options from the drawing manager and replaces the
    // stroke or fill color as appropriate.
    var polylineOptions = drawingManager.get('polylineOptions');
    polylineOptions.strokeColor = color;
    drawingManager.set('polylineOptions', polylineOptions);

    var rectangleOptions = drawingManager.get('rectangleOptions');
    rectangleOptions.fillColor = color;
    drawingManager.set('rectangleOptions', rectangleOptions);

    var circleOptions = drawingManager.get('circleOptions');
    circleOptions.fillColor = color;
    drawingManager.set('circleOptions', circleOptions);

    var polygonOptions = drawingManager.get('polygonOptions');
    polygonOptions.fillColor = color;
    drawingManager.set('polygonOptions', polygonOptions);
}

function setSelectedShapeColor(color) {
    if (selectedShape) {
        if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
            selectedShape.set('strokeColor', color);
        } else {
            selectedShape.set('fillColor', color);
        }
    }
}

function makeColorButton(color) {
    var button = document.createElement('span');
    button.className = 'color-button';
    button.style.backgroundColor = color;
    google.maps.event.addDomListener(button, 'click', function () {
        selectColor(color);
        setSelectedShapeColor(color);
    });

    return button;
}

function buildColorPalette() {
    var colorPalette = document.getElementById('color-palette');
    for (var i = 0; i < colors.length; ++i) {
        var currColor = colors[i];
        var colorButton = makeColorButton(currColor);
        colorPalette.appendChild(colorButton);
        colorButtons[currColor] = colorButton;
    }
    selectColor(colors[0]);
}

function initialize() {
    var newark = new google.maps.LatLng(40.740, -74.18);
    var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.712216, -74.22655),
    new google.maps.LatLng(40.773941, -74.12544));

    var mapOptions = {
        zoom: 13,
        center: newark
    };

    airOverlay = new google.maps.GroundOverlay(
        'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds);
    // historicalOverlay.setMap(map);
    /*
            var honduras = new google.maps.LatLng(14.888522, -87.150924);
            var imageBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(12.850803, -89.547900),
                new google.maps.LatLng(16.668892, -83.002123));

            var mapOptions = {
                zoom: 8,
                center: honduras,
                disableDefaultUI: true,
                mapTypeControl: true,
                zoomControl: true
            };

            mapp = new google.maps.Map(document.getElementById('map-canvas'), 
                mapOptions);

            airOverlay = new google.maps.GroundOverlay('../overlayImg/airmap.png', imageBounds);
*/

    mapp = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    
    addOverlay();
    
    var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true,
        draggable: true
    };

    // Creates a drawing manager attached to the map that allows the user to draw
    // markers, lines, and shapes.
    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        markerOptions: {
            draggable: true
        },

        polylineOptions: {
            editable: true,
            draggable: true
        },

        rectangleOptions: polyOptions,
        circleOptions: polyOptions,
        polygonOptions: polyOptions,
        map: mapp
    });

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
        var newShape = e.overlay;

        newShape.type = e.type;

        if (e.type !== google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);

            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            google.maps.event.addListener(newShape, 'click', function (e) {
                if (e.vertex !== undefined) {
                    if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
                        var path = newShape.getPaths().getAt(e.path);
                        path.removeAt(e.vertex);
                        if (path.length < 3) {
                            newShape.setMap(null);
                        }
                    }
                    if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
                        var path = newShape.getPath();
                        path.removeAt(e.vertex);
                        if (path.length < 2) {
                            newShape.setMap(null);
                        }
                    }
                }
                setSelection(newShape);
            });
            setSelection(newShape);
        } else {
            google.maps.event.addListener(newShape, 'click', function (e) {
                setSelection(newShape);
            });
            setSelection(newShape);
        }
    });

    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(mapp, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

    buildColorPalette();

}

function addOverlay() {
    airOverlay.setMap(mapp);
}

// [START region_removal]
function removeOverlay() {
    airOverlay.setMap(null);
}
// [END region_removal]

function setOpacity() {
    var opacityStr = document.getElementById('opacity').value;
    var opacity = parseFloat(opacityStr);
    airOverlay.setOpacity(opacity);
}

google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas, #map {
          height: 99.9%;
          margin: 0px;
          padding: 0px;
      }
      #panel {
          position: absolute;
          top: 5px;
          left: 50%;
          margin-left: -180px;
          font-family: Arial, sans-serif;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
      }
      #drawPanel {
          position: absolute;
          width: 200px;
          font-family: Arial, sans-serif;
          font-size: 13px;
          float: left;
          margin-top: 5px;
          margin-left: 200px;
          z-index: 5;
      }
      #color-palette {
          clear: both;
      }
      .color-button {
          width: 20px;
          height: 20px;
          font-size: 0;
          margin: 2px;
          float: left;
          cursor: pointer;
      }
      #delete-button {
          margin-top: 0px;
          margin-left: 22px;
      }
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&ext=.js"></script>
<div id="drawPanel">
    <div id="color-palette"></div>
    <div>
        <button id="delete-button">Borrar Selección</button>
    </div>
</div>
<div id="panel">
    <input onclick="removeOverlay();" type=button value="Remover overlay">
    <input onclick="addOverlay();" type=button value="Restaurar overlay">
    <input type="text" id="opacity" value="0.5"></input>
    <input type="button" value="Transparencia" onclick="setOpacity();"></input>
</div>
<div id="map-canvas"></div>
<div id="map"></div>

相关问题
最新问题