使用图形管理器覆盖自定义叠加图像 [英] Using Drawing Manager over custom overlay image

问题描述

我希望在叠加图片的顶部使用图片管理器，我只能通过切换div顺序来使用图片管理器，但是我希望所有的功能都放在同一张地图上，如果可能的话，我们将为您提供任何帮助。

这是我的代码：

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> 
< meta charset =utf-8> 
< meta name =descriptioncontent =CentroEstratégicode VigilanciaAéreayMarítimaHonduras> 
< meta name =authorcontent =1RDS-PAMT> 
< title> AIR MAP HND< / title> 
< link rel =快捷图标href =../ images / cevamicon.ico> 
 
< style> 
 html，body，＃map-canvas，#map {
 height：99.9％; 
 margin：0px; 
 padding：0px; 
} 
 
 #panel {
 position：absolute; 
 top：5px; 
剩下：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; 
光标：指针; 
} 
 
＃delete-button {
 margin-top：0px; 
 margin-left：22px; 
} 
< / style> 
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?libraries=drawing>< / script> 
< script> 
 
 //这增加了一个UI控件，允许用户从地图上移除地面覆盖层。 
 //并构建调色板并删除选定的形状和标记。 
 
 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; 
 
 
函数deleteSelectedShape（）{
 if（selectedShape）{
 selectedShape.setMap（null）; 
} 
} 
 
函数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'; 
} 
 
 //从绘图管理器中检索当前选项，并根据需要替换
 //笔划或填充颜色。 
 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）; 
 
 
函数setSelectedShapeColor（color）{
 if（selectedShape）{
 if（selectedShape.type == google.maps.drawing.OverlayType.POLYLINE）{ 
 selectedShape.set（'strokeColor'，color）; 
} else {
 selectedShape.set（'fillColor'，color）; 
 
 
 
 
函数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）; 
}）; 
 
返回按钮; 
} 
 
函数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]）; 
 
 
函数初始化（）{
 
 var洪都拉斯=新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））; 
 $ b $ var mapOptions = {
 zoom：8，
 center：洪都拉斯，
 disableDefaultUI：true，
 mapTypeControl：true，
 zoomControl：真
}; 
 
 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 
}; 
 
 //创建附加到地图上的绘图管理器，允许用户绘制
 //标记，线条和形状。 
 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）{
 //绘制形状后切换回非绘图模式
 drawingManager.setDrawingMode（null）; 
 
 //添加一个事件侦听器，用于在用户
 //将鼠标拖拽到其上时选择新绘制的形状
 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）; 
如果（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）; 
} 
}）; 
 
 //当绘图模式改变或单击
 //地图时清除当前选择。 
 google.maps.event.addListener（drawingManager，'drawingmode_changed'，clearSelection）; 
 google.maps.event.addListener（地图，'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] 
 
函数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> BorrarSelección< / button> 
< / div> 
< / div> 
< div id =panel> 
< input onclick =removeOverlay（）; type = button value =去除覆盖> 
< input onclick =addOverlay（）; type = button value =Restaurar overlay> 
< input type =textid =opacityvalue =0.5>< / input> 
< input type =buttonvalue =Transparenciaonclick =setOpacity（）;>< / input> 
< / div> 
< div id =map-canvas>< / div> 
< div id =map>< / div> 
< / body> 
 
< / html> 
  

解决方案

您需要删除第二张地图，和绘图管理器到相同的地图。

证明概念小提琴

工作代码片段：

// This add一个UI控件，允许用户从地图上删除地面覆盖层.//并构建调色板并删除选定的形状和标记。var airPlayer; 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（真）; 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'; } //从绘图管理器中检索当前选项并根据需要替换//笔划或填充颜色。 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）; }}}函数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）;}）;返回按钮;}函数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洪都拉斯=新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}; //创建一个附加到地图的绘图管理器，允许用户绘制标记，线条和形状。 drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.POLYGON，markerOptions：{draggable：true}，polylineOptions：{editable：true，dragggable：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）{//绘制形状后，切换回非绘图模式drawingManager.setDrawingMode（null）; //添加一个事件监听器，当用户将鼠标移动到其上时，选择新绘制的形状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）; }}）; //当绘图模式改变或者单击//地图时清除当前选择。 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）; （）函数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;剩下：50％; margin-left：-180px; font-family：Arial，sans-serif; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; } #drawPanel {position：absolute;宽度：200px; font-family：Arial，sans-serif; font-size：13px;向左飘浮; margin-top：5px; margin-left：200px; z-index：5; }＃color-palette {clear：both; } .color-button {width：20px; height：20px; font-size：0; margin：2px;向左飘浮;光标：指针; }＃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> BorrarSelección< / button> < / div>< / div>< div id =panel> < input onclick =removeOverlay（）; type = button value =去除覆盖> < input onclick =addOverlay（）; type = button value =Restaurar overlay> < input type =textid =opacityvalue =0.5>< / input> < input type =buttonvalue =Transparenciaonclick =setOpacity（）;>< / input>< / div>< div id =map-canvas>< / div> < div id =map>< / div>

I would like use Drawing Manager on top of an overlay image so far I can use only one by switching the div order but I want all functions in one map, if possible, any help will be appreciated.

here is my code:

<!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>

解决方案

You need to remove the second map, add the overlay and the drawing manager to the same map.

proof of concept fiddle

working code snippet:

// 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>

这篇关于使用图形管理器覆盖自定义叠加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！