将随机颜色应用于elementType＆＃39; geometry＆＃39;在谷歌地图

Question

我试图通过修改元素来将随机颜色应用于谷歌地图，但我对此太过新了。

$(document).ready(function() {
    $('.geometry').each(function () {
        var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 
           200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + 
           ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
           $(this).css("color", hue);
    });
});

申请：

<script>
  function initMap() {
    // Styles a map in night mode.
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 47.730, lng: -122.323},
      zoom: 12,
      styles: [
        {elementType: 'geometry', stylers: [{color: '#e32929'}]},

谢谢。

Answer 1

一种选择是使用返回随机颜色的函数构造样式数组：

function getColor() {
  var red = (Math.floor((256 - 199) * Math.random()) + 200);
  var green = (Math.floor((256 - 199) * Math.random()) + 200);
  var blue = (Math.floor((256 - 199) * Math.random()) + 200);
  var color = "#"+red.toString(16) + green.toString(16) + blue.toString(16);
  return color;
}

然后构造样式数组：

var styles = [{
      elementType: 'geometry',
    stylers: [{
      color: getColor()
    }]
  }, {
    elementType: 'labels.text.stroke',
    stylers: [{
      color: getColor()
    }]
  }, { // etc...

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var geocoder;
var map;

function getColor() {
  var red = (Math.floor((256 - 199) * Math.random()) + 200);
  var green = (Math.floor((256 - 199) * Math.random()) + 200);
  var blue = (Math.floor((256 - 199) * Math.random()) + 200);
  var color = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
  return color;
}

function initialize() {
  var styles = [{
    elementType: 'geometry',
    stylers: [{
      color: getColor()
    }]
  }, {
    elementType: 'labels.text.stroke',
    stylers: [{
      color: getColor()
    }]
  }, {
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'administrative.locality',
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'poi',
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'poi.park',
    elementType: 'geometry',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'poi.park',
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'road',
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'road.highway',
    elementType: 'geometry.stroke',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'road.highway',
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'transit',
    elementType: 'geometry',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'transit.station',
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{
      color: getColor()
    }]
  }, {
    featureType: 'water',
    elementType: 'labels.text.stroke',
    stylers: [{
      color: getColor()
    }]
  }]

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 47.730,
      lng: -122.323
    },
    zoom: 12,
    styles: styles
  });

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

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;