我使用样式地图向导创建了我的谷歌地图的样式版本，但我不确定如何将 JSON 集成到我的 html 中？任何帮助表示赞赏。谢谢！
这是代码的剪辑。
{
"featureType": "road.highway.controlled_access",
"stylers": [
{ "color": "#808080" }
]
}
另外，这里是jsfiddle 的链接。
这是我当前的所有代码。
<!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 {
height: 100%
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiYR3lgzcF8CxuOwe7SYsJAPjZQXOhQQ&sensor=false"></script>
<script type="text/javascript">
var line;
var title;
var map;
var loc;
var locations = [];
var image = new google.maps.MarkerImage('parkingIconRed.png');
var styles = [
{
"featureType": "road.highway.controlled_access",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#80d9ff" },
{ "weight": 1.6 }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#d2d3ff" }
]
},{
"featureType": "road.arterial",
"elementType": "labels.text.stroke",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{ "weight": 0.1 },
{ "color": "#f3f6f7" }
]
},{
"featureType": "road.highway",
"stylers": [
{ "color": "#b4b4ff" }
]
},{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "poi.school",
"stylers": [
{ "color": "#f1f1f1" }
]
},{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#808080" },
{ "weight": 3.2 }
]
},{
"featureType": "administrative",
"stylers": [
{ "color": "#808080" }
]
},{
},{
}
]
map.setOptions({styles: styles});
function initialize() {
var raleigh = new google.maps.LatLng(35.77425, -78.639248);
var mapOptions = {
zoom : 17,
minZoom : 17,
center : raleigh,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var cityPlaza;
/*var RLINELayer = new google.maps.KmlLayer('http://caseymmiller.com/j586/MapsTest/RLINE.kml');
RLINELayer.setMap(map);*/
var plazaCoords = [
new google.maps.LatLng(35.773893, -78.63854),
new google.maps.LatLng(35.772944, -78.638594),
new google.maps.LatLng(35.772962, -78.639345),
new google.maps.LatLng(35.773884, -78.63928)
];
cityPlaza = new google.maps.Polygon({
paths : plazaCoords,
strokeColor : "#33CCFF",
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : "#33CCFF",
fillOpacity : 0.35
});
cityPlaza.setMap(map);
var parking = [
['Salisbury Deck', 35.775007, -78.640804],
['Cabarrus Deck', 35.774589, -78.640793],
['Hannover Deck', 35.774511, -78.640031],
['Convention Center Underground Deck', 35.773292, -78.639355],
['Performing Arts Deck', 35.772666, -78.641576],
['Charter Square Deck', 35.773893, -78.638551],
['Blount Street Deck', 35.776226, -78.637499],
['McDowell Street Surface Parking', 35.775303, -78.641673],
['Salisbury Parking Lot', 35.775442, -78.640814],
['Convention Center Parking Lot', 35.772553, -78.639527],
['Lenoir Street Parking Lot', 35.773231, -78.638207],
['Carrabus street Parking Lot', 35.774032, -78.63824]
];
for (var i = 0; i < parking.length; i++) {
createMarker(parking[i]);
}
var lineCoordinates = [new google.maps.LatLng(35.779742, -78.643389), new google.maps.LatLng(35.77438, -78.643733), new google.maps.LatLng(35.774259, -78.640396), new google.maps.LatLng(35.772953, -78.640482), new google.maps.LatLng(35.772866, -78.638465), new google.maps.LatLng(35.776879, -78.638315), new google.maps.LatLng(35.776766, -78.634989), new google.maps.LatLng(35.778097, -78.634883), new google.maps.LatLng(35.778202, -78.638209), new google.maps.LatLng(35.781178, -78.638059)];
var lineSymbol = {
path : google.maps.SymbolPath.CIRCLE,
scale : 8,
strokeColor : '#000'
};
line = new google.maps.Polyline({
path : lineCoordinates,
strokeColor : '#C82536',
icons : [{
icon : lineSymbol,
offset : '100%'
}],
map : map
});
animateCircle();
}
function animateCircle() {
var count = 0;
var time = offsetId = window.setInterval(function() {
count = (count + 1) % 2400;
var icons = line.get('icons');
icons[0].offset = (count / 24) + '%';
line.set('icons', icons);
}, 20);
}
function createMarker(parking) {
var myLatLng = new google.maps.LatLng(parking[1], parking[2]);
console.log(myLatLng.toUrlValue());
var marker = new google.maps.Marker({
position : myLatLng,
map : map,
icon : image,
title: parking[0],
});
return marker;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>