將隨機顏色應用於谷歌地圖中的elementType'幾何'

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; 
} 

然後contruct樣式數組：

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

proof of concept fiddle

代碼段：

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);

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

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