谷歌多边形地图背景颜色透明，周边区域半透明叠加答案

【问题标题】：Google polygonal map background color transparent, surrounding area semi-transparent overlay谷歌多边形地图背景颜色透明，周边区域半透明叠加
【发布时间】：2012-06-18 11:08:40
【问题描述】：

我正在尝试复制类似于以下地图的内容，其中多边形区域是透明的，而周围区域是半透明的：

有人可以帮忙吗？

这是原文： https://energyeasy.ue.com.au/outages/powerOutages

【问题讨论】：

标签： google-maps-api-3 polygon

【解决方案1】：

使用一些 CSS 和一个 512 x 512px 的大 png，我设法模拟了我想要实现的目标。我相信会有更准确的方法，但这对我有用。

http://www.syn-rg.com.au/Development/United-Energy/mg_map/MG_Area_map_02.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0; }
      #map_canvas {
    background-color: #EAEAEA;
    border: 1px solid #CCCCCC;
    height: 400px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 532px;
}
#map_canvas div div div div div img{ border:1000px solid black;margin:-1000px -1000px;}
/*#map_canvas div div div div div div div{ background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.5);}*/
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7UaoyrY4KyoW1iEU0KFo0ZOxH5w30oZ8&sensor=true"></script>
    <script type="text/javascript">
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

function initialize() {
    var myLatLng = new google.maps.LatLng(-37.815676, 145.449005);
    var myOptions = {
        zoom: 9,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var swBound = new google.maps.LatLng(-38.269876, 144.842405); // Latitude, Longitude = 182.749 or 107.183 or 108.4443 or 107.77615
    var neBound = new google.maps.LatLng(-37.161476, 146.249005); //  -0.5542, +0.7033 = 256px
    //var swBound = new google.maps.LatLng(-37.783, 144.966); 
    //var neBound = new google.maps.LatLng(-37.225, 145.66930); 
    //var swBound = new google.maps.LatLng(62.281819, -150.287132);
    //var neBound = new google.maps.LatLng(62.400471, -150.005608);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);
    // Photograph courtesy of the U.S. Geological Survey
    var srcImage = 'images/mg_map_full.png';
    overlay = new USGSOverlay(bounds, srcImage, map);
}

function USGSOverlay(bounds, image, map) {
    // Now initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;
    // We define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div_ = null;
    // Explicitly call setMap on this overlay
    this.setMap(map);
}
USGSOverlay.prototype.onAdd = function () {
    // Note: an overlay's receipt of onAdd() indicates that
    // the map's panes are now available for attaching
    // the overlay to the map via the DOM.
    // Create the DIV and set some basic attributes.
    var div = document.createElement('div');
    div.style.borderStyle = "none";
    div.style.borderWidth = "0";
    div.style.borderColor = "red";
    div.style.position = "absolute";
    div.style.opacity = "0.3";
    // Create an IMG element and attach it to the DIV.
    var img = document.createElement("img");
    img.src = this.image_;
    img.style.width = "100%";
    img.style.height = "100%";
    img.style.position = 'absolute';
    div.appendChild(img);
    // Set the overlay's div_ property to this DIV
    this.div_ = div;
    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the overlayImage pane.
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
}
USGSOverlay.prototype.draw = function () {
    // Size and position the overlay. We use a southwest and northeast
    // position of the overlay to peg it to the correct position and size.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();
    // Retrieve the southwest and northeast coordinates of this overlay
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to resize the DIV.
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
    // Resize the image's DIV to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
}
USGSOverlay.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
  </body>
</html>

【讨论】：