Question

我试图使大部分地图变暗，除了我圈子里面的区域，我有一个标记。在里面我希望地图很轻。我试图设置地图的亮度，但不确定这是否是正确的方法？在我的代码下面和我的Fiddle我可以创建一个黑暗的地图，但我无法弄清楚如何使圆圈内的区域变亮。请参阅底部的图片，例如我正在尝试做的事情。

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    var $styles = [{
      stylers: [{
        lightness: -60
      }]
    }];




    var mapOptions = {
      zoom: "",
      zoomControl: "",
      center: "",
      disableDefaultUI: "",
      draggable: "",
      styles: $styles,
      disableDoubleClickZoom: ""
    }

    var geocoder = new google.maps.Geocoder();

    function geocodePosition(pos) {
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }

    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }

    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
    }

    function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
    }

    function initialize() {
      var latLng = new google.maps.LatLng(37.9, -122);
      var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 14,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: $styles
      });
      var marker = new google.maps.Marker({
        position: latLng,
        title: 'Point A',
        map: map,
        draggable: true
      });

      var circleOptions = {
        //strokeColor: '#FF0000',
        //strokeOpacity: 0.8,
        //strokeWeight: 2,
        //fillColor: "", //'#FF0000',
        //fillOpacity: 0.35,
        map: map,
        center: new google.maps.LatLng(37.9, -122),
        radius: Math.sqrt(5) * 100
      };
      var circle = new google.maps.Circle(circleOptions);

      marker.bindTo('position', map, 'center');

      // Update current position info.
      updateMarkerPosition(latLng);
      geocodePosition(latLng);

      // Add dragging event listeners.
      google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
      });

      google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
      });

      google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
      });
    }

     // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <style>
    #mapCanvas {
      width: 500px;
      height: 400px;
      float: left;
    }
    #infoPanel {
      float: left;
      margin-left: 10px;
    }
    #infoPanel div {
      margin-bottom: 5px;
    }
  </style>

  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Marker status:</b>
    <div id="markerStatus"><i>Click and drag the marker.</i>
    </div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
</body>

</html>

＆＃13;

我希望我的地图看起来像这样。

enter image description here

标记位于Google地图中的灯光区域周围的黑暗地图

0 个答案: