Question

我使用谷歌地图JavaScript API，我必须将整个地图灰色，不包括地图上的两个点（理想情况下是两个点之间的线）。点本身就是GM坐标。

结果我期望与下面的图像类似：

Answer 1

我可以给你一个提示。如果你的数组＆lt; array＆lt; LatLng＆gt;＆gt;对于Polygon，你可以制作一个孔多边形。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
    #map_canvas {
      width: 600px;
      height: 400px;
      border: 1px solid gray;
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?language=ja"></script>
    <script>
      function initialize() {
        var mapDiv = document.getElementById("map_canvas");
        var map = new google.maps.Map(mapDiv, {
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        var paths = [[
          {lat: 41.795692, lng: 140.756214},
          {lat: 41.795492, lng: 140.756150},
          {lat: 41.794700, lng: 140.757051},
          {lat: 41.795556, lng: 140.757813},
          {lat: 41.795764, lng: 140.757759},
          {lat: 41.796140, lng: 140.758349},
          {lat: 41.796044, lng: 140.758628},
          {lat: 41.796468, lng: 140.759819},
          {lat: 41.797283, lng: 140.759014},
          {lat: 41.797243, lng: 140.758746},
          {lat: 41.797811, lng: 140.758478},
          {lat: 41.797915, lng: 140.758714},
          {lat: 41.798995, lng: 140.758532},
          {lat: 41.798611, lng: 140.757158},
          {lat: 41.798459, lng: 140.757105},
          {lat: 41.798403, lng: 140.756343},
          {lat: 41.798587, lng: 140.756246},
          {lat: 41.798763, lng: 140.754884},
          {lat: 41.797795, lng: 140.754959},
          {lat: 41.797667, lng: 140.755152},
          {lat: 41.797067, lng: 140.754970},
          {lat: 41.797035, lng: 140.754648},
          {lat: 41.796180, lng: 140.753993},
          {lat: 41.795892, lng: 140.755302},
          {lat: 41.796004, lng: 140.755517}
        ], [
          {lat: 41.79873502198214,lng: 140.75676172883607},
          {lat: 41.79916701538921, lng: 140.75850996560666},
          {lat: 41.79914485048169, lng: 140.7587355674591},
          {lat: 41.7990097958377,  lng: 140.75889128372955},
          {lat: 41.79765499919136, lng: 140.75906845767213},
          {lat: 41.796517596211274,lng: 140.76016803505706},
          {lat: 41.796368000728584,lng: 140.76021618650816},
          {lat: 41.79622196495789, lng: 140.76011429828645},
          {lat: 41.795668,         lng: 140.75844600000005},
          {lat: 41.79445009984378, lng: 140.75732211342245},
          {lat: 41.794408009120424,lng: 140.75713163558203},
          {lat: 41.79443604749871, lng: 140.75693313624572},
          {lat: 41.79504399484126, lng: 140.75620355952447},
          {lat: 41.79469004147552, lng: 140.7551119011191},
          {lat: 41.79468803224198, lng: 140.7549643802871},
          {lat: 41.794772,         lng: 140.75484099999994},
          {lat: 41.795688013079555,lng: 140.75483010185235},
          {lat: 41.79588801219829, lng: 140.75383221957395},
          {lat: 41.796148,         lng: 140.75363900000002},
          {lat: 41.79740700714976, lng: 140.75463119510653},
          {lat: 41.798787067556184,lng: 140.75458362698373},
          {lat: 41.79894300457668, lng: 140.7547121759186},
          {lat: 41.79898498098061, lng: 140.75494811176304},
          {lat: 41.79872702373399, lng: 140.7566860846557}
        ], [
          {lat: 41.79509359115337, lng: 140.7559088009109},
          {lat: 41.795123461144776, lng: 140.75608584124757},
          {lat: 41.79546948885738, lng: 140.7556779973297},
          {lat: 41.79554756063853, lng: 140.7555651964035},
          {lat: 41.795647713509155, lng: 140.7550391871414},
          {lat: 41.794831758258425, lng: 140.75507730157472}
        ]];
        // Draw polygon
        var polygon = new google.maps.Polygon({
          paths: paths,
          map: map,
          strokeColor: "blue",
          strokeWeight: 2,
          fillColor: "red",
          fillOpacity: 0.75
        });

        var bounds = new google.maps.LatLngBounds();
        polygon.getPath().forEach(function(position) {
          bounds.extend(position);
        });

        map.fitBounds(bounds);
      }
      google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

谷歌地图。覆盖地图以外的地图

1 个答案: