我已经在Google Maps Api中绘制了一些轨迹。但我想为每条轨迹赋予不同的颜色。问题是即使strokeColor不是'＃0000'，颜色也总是黑色。关于发生了什么的任何想法？这是我的代码：
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -12, lng: -77},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.loadGeoJson('aristas.geojson');
var aristasPath = new google.maps.Polyline({
path: aristas,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
aristasPath.setMap(map);
}
</script>
答案 0 :(得分：0)
您adding your polyline to the data layer .loadGeoJson // Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
，需要使用data layer styling methods设置样式，而不是正常google.maps.Polyline
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: -12,
lng: -77
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.addGeoJson(platesJson);
// Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
}
google.maps.event.addDomListener(window, 'load', initMap);
var platesJson = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"strnum": 420,
"platecode": 201,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "PERU-CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-81.8796, -5.0707],
[-81.876, -5.1257],
[-81.8735, -5.2358],
[-81.8737, -5.2473],
[-81.8806, -5.3778],
[-81.871, -5.4765],
[-81.8638, -5.5843],
[-81.8346, -5.736],
[-81.8182, -5.8416],
[-81.7953, -5.9634],
[-81.7765, -6.0598],
[-81.7624, -6.1654],
[-81.7437, -6.2687],
[-81.7293, -6.3536],
[-81.7064, -6.4775],
[-81.6682, -6.6405],
[-81.6263, -6.7213],
[-81.5982, -6.8087],
[-81.5294, -6.9219],
[-81.4834, -7.0347],
[-81.4483, -7.1152],
[-81.3914, -7.2533],
[-81.3679, -7.3427],
[-81.3469, -7.4436],
[-81.3323, -7.5191],
[-81.2998, -7.6201],
[-81.2756, -7.673],
[-81.2494, -7.7373],
[-81.2318, -7.7764],
[-81.2255, -7.8039],
[-81.1969, -7.866],
[-81.1661, -7.9327],
[-81.1379, -8.0129],
[-81.1037, -8.1434],
[-81.0577, -8.2559],
[-81.0115, -8.3547],
[-80.9587, -8.4649],
[-80.9126, -8.5682],
[-80.8997, -8.6139],
[-80.8439, -8.6855],
[-80.8132, -8.7611],
[-80.7695, -8.8688],
[-80.7301, -8.965],
[-80.6681, -9.0752],
[-80.6064, -9.1967],
[-80.5598, -9.2748],
[-80.5088, -9.3598],
[-80.4557, -9.4584],
[-80.4184, -9.5408],
[-80.3541, -9.6486],
[-80.2921, -9.7608],
[-80.2479, -9.8433],
[-80.201, -9.9053],
[-80.126, -10.0518],
[-80.0703, -10.1298],
[-80.0196, -10.2304],
[-79.9303, -10.3452],
[-79.8612, -10.4438],
[-79.817, -10.5261],
[-79.7463, -10.6608],
[-79.6729, -10.7684],
[-79.6218, -10.8507],
[-79.5865, -10.9169],
[-79.551, -10.9785],
[-79.5266, -11.0151],
[-79.4953, -11.0541],
[-79.4757, -11.1086],
[-79.4607, -11.1608],
[-79.4388, -11.2131],
[-79.3921, -11.2839],
[-79.3566, -11.341],
[-79.2965, -11.4323],
[-79.2206, -11.5306],
[-79.1829, -11.5899],
[-79.1426, -11.6403],
[-79.1004, -11.7064],
[-79.0628, -11.7724],
[-79.0273, -11.8293],
[-78.9893, -11.8773],
[-78.9271, -11.9752],
[-78.8806, -12.0594],
[-78.7889, -12.169],
[-78.7083, -12.2582],
[-78.6413, -12.3425],
[-78.5833, -12.42],
[-78.5209, -12.5088],
[-78.4454, -12.6269],
[-78.4124, -12.6948],
[-78.377, -12.7606],
[-78.3217, -12.858],
[-78.2665, -12.9622],
[-78.2089, -13.0619],
[-78.1528, -13.1189],
[-78.1058, -13.1713],
[-78.0453, -13.2373],
[-77.983, -13.3325],
[-77.952, -13.3868],
[-77.89, -13.4908],
[-77.7986, -13.62],
[-77.738, -13.677],
[-77.6595, -13.7566],
[-77.5585, -13.8589],
[-77.5113, -13.9045],
[-77.4488, -13.9837],
[-77.3997, -14.0471],
[-77.2988, -14.1516],
[-77.2249, -14.2354],
[-77.1801, -14.2831],
[-77.0858, -14.3761],
[-76.9742, -14.5207],
[-76.9026, -14.6066],
[-76.8151, -14.695],
[-76.7568, -14.7539],
[-76.6966, -14.8328],
[-76.6426, -14.8805],
[-76.6043, -14.9123],
[-76.5272, -14.9426],
[-76.5002, -14.9697],
[-76.4512, -15.0372],
[-76.3958, -15.1271],
[-76.3718, -15.1919],
[-76.2867, -15.2844],
[-76.1922, -15.366],
[-76.0885, -15.4455],
[-75.9892, -15.5137],
[-75.8835, -15.6065],
[-75.8343, -15.6605],
[-75.7868, -15.688],
[-75.7211, -15.7223],
[-75.6718, -15.7764],
[-75.6115, -15.8527],
[-75.5537, -15.9378],
[-75.4955, -16.003],
[-75.4324, -16.0527],
[-75.3538, -16.1271],
[-75.2975, -16.1723],
[-75.2206, -16.2134],
[-75.173, -16.2363],
[-75.0938, -16.2819],
[-75.0286, -16.3404],
[-74.959, -16.4035],
[-74.8848, -16.471],
[-74.8082, -16.5297],
[-74.788, -16.5499],
[-74.6751, -16.6268],
[-74.6052, -16.6766],
[-74.4517, -16.7784],
[-74.3209, -16.8732],
[-74.1941, -16.9415],
[-74.0948, -17.0092],
[-74.0022, -17.0658],
[-73.8987, -17.1534],
[-73.7904, -17.23],
[-73.6974, -17.2712],
[-73.5977, -17.3169],
[-73.4981, -17.3713],
[-73.4422, -17.436],
[-73.3863, -17.5006],
[-73.3189, -17.5654],
[-73.2204, -17.6746],
[-73.1355, -17.7746],
[-72.9596, -17.9025],
[-72.8495, -18.0051],
[-72.7776, -18.072],
[-72.6854, -18.1523],
[-72.6089, -18.2127],
[-72.5661, -18.2484],
[-72.4901, -18.3392],
[-72.4277, -18.4211],
[-72.352, -18.5271],
[-72.2618, -18.5963],
[-72.1823, -18.6217],
[-72.1168, -18.6642],
[-72.0611, -18.7371],
[-72.0148, -18.825],
[-71.8849, -18.9687],
[-71.8676, -19.0169],
[-71.8187, -19.0895],
[-71.7944, -19.1355],
[-71.7453, -19.1972],
[-71.687, -19.259],
[-71.6264, -19.3144],
[-71.5974, -19.3539],
[-71.5595, -19.4023],
[-71.5149, -19.4595],
[-71.4862, -19.512],
[-71.4531, -19.5755],
[-71.4317, -19.6538],
[-71.3991, -19.741],
[-71.3665, -19.826],
[-71.3143, -19.9653],
[-71.2905, -20.0327],
[-71.2605, -20.1369],
[-71.2512, -20.2472],
[-71.2303, -20.3489],
[-71.2043, -20.4226],
[-71.1895, -20.4854],
[-71.1863, -20.5565],
[-71.186, -20.7739],
[-71.1786, -20.8643],
[-71.1853, -20.9737],
[-71.1805, -21.079],
[-71.1729, -21.1563],
[-71.1613, -21.268],
[-71.1497, -21.3753],
[-71.1377, -21.4612],
[-71.1416, -21.5445],
[-71.1457, -21.6364],
[-71.1538, -21.7004],
[-71.1544, -21.7303],
[-71.1794, -21.843],
[-71.1858, -21.9326],
[-71.1875, -22.02],
[-71.1892, -22.1094],
[-71.1845, -22.216],
[-71.1851, -22.3607],
[-71.181, -22.5031],
[-71.1939, -22.5794],
[-71.2321, -22.7739],
[-71.2546, -22.871],
[-71.2778, -23.004],
[-71.2961, -23.1222],
[-71.2834, -23.2873],
[-71.2969, -23.3926],
[-71.2989, -23.4917],
[-71.2851, -23.6057],
[-71.3027, -23.6855],
[-71.3118, -23.7969],
[-71.3184, -23.8977],
[-71.328, -24.0383],
[-71.3413, -24.1304],
[-71.3664, -24.2412],
[-71.3866, -24.3372],
[-71.3787, -24.5132],
[-71.3796, -24.6721],
[-71.379, -24.7577],
[-71.3746, -24.8809],
[-71.3893, -25.0432],
[-71.4122, -25.1552],
[-71.4473, -25.3085],
[-71.4826, -25.4741],
[-71.4918, -25.588],
[-71.4655, -25.6465],
[-71.4655, -25.6465],
[-71.4651, -25.7397],
[-71.4719, -25.8493],
[-71.4735, -25.9279],
[-71.4806, -26.0538],
[-71.4965, -26.1609],
[-71.5245, -26.3006],
[-71.5664, -26.4482],
[-71.5889, -26.5445],
[-71.6372, -26.6732],
[-71.6522, -26.8474],
[-71.6607, -26.9272],
[-71.6882, -27.0415],
[-71.7346, -27.188],
[-71.7597, -27.2939],
[-71.7892, -27.3955],
[-71.8165, -27.5011],
[-71.8336, -27.5559],
[-71.8689, -27.6001],
[-71.8882, -27.6527],
[-71.9121, -27.7012],
[-71.9463, -27.8064],
[-71.9406, -27.8654],
[-71.9393, -27.9142],
[-71.9527, -28.0053]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 444,
"platecode": 291,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 1,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-71.9527, -28.0053],
[-71.9851, -28.1366],
[-72.0072, -28.2112],
[-72.049, -28.3522],
[-72.1035, -28.5534],
[-72.1591, -28.7018],
[-72.1887, -28.8041],
[-72.2016, -28.8763],
[-72.2217, -28.9645],
[-72.2224, -28.9966],
[-72.2242, -29.083],
[-72.2368, -29.139],
[-72.2514, -29.1829],
[-72.2853, -29.2726],
[-72.3071, -29.3284],
[-72.305, -29.4486],
[-72.3238, -29.5823],
[-72.3395, -29.6779],
[-72.3671, -29.7932],
[-72.4251, -29.9397],
[-72.4341, -30.0431],
[-72.4545, -30.1441],
[-72.4674, -30.2134],
[-72.4695, -30.3126],
[-72.4508, -30.4002],
[-72.446, -30.4973],
[-72.4499, -30.5725],
[-72.4656, -30.6671],
[-72.4835, -30.7597],
[-72.4951, -30.872],
[-72.4934, -31.1143],
[-72.5261, -31.2572],
[-72.5313, -31.3926],
[-72.5351, -31.465],
[-72.5439, -31.555],
[-72.55, -31.6234],
[-72.5487, -31.6723],
[-72.5293, -31.7254],
[-72.5256, -31.7684],
[-72.5245, -31.8231],
[-72.5325, -31.8738],
[-72.5518, -31.9242],
[-72.5717, -31.9979],
[-72.5779, -32.0738],
[-72.5789, -32.1205],
[-72.5824, -32.1749],
[-72.5832, -32.2118],
[-72.5811, -32.2196],
[-72.5679, -32.247],
[-72.539, -32.2824],
[-72.5237, -32.3157],
[-72.5313, -32.3486],
[-72.5503, -32.3851],
[-72.5814, -32.4467],
[-72.6154, -32.5373],
[-72.6348, -32.5892],
[-72.6401, -32.6259],
[-72.6602, -32.7068],
[-72.6663, -32.7782],
[-72.6677, -32.8419],
[-72.6664, -32.8882],
[-72.6607, -32.9423],
[-72.6531, -33.0118],
[-72.6538, -33.0426],
[-72.6551, -33.1023],
[-72.6627, -33.1387],
[-72.6772, -33.175],
[-72.6909, -33.2767],
[-72.741, -33.3757],
[-72.7447, -33.4389],
[-72.7695, -33.5267],
[-72.7801, -33.5954],
[-72.7779, -33.5974],
[-72.7787, -33.6337],
[-72.8056, -33.7136],
[-72.844, -33.797],
[-72.8591, -33.8597],
[-72.8884, -33.9432],
[-72.9127, -34.0114],
[-72.953, -34.0774],
[-73.0047, -34.1393],
[-73.0723, -34.1991],
[-73.1331, -34.2609],
[-73.1892, -34.315],
[-73.2542, -34.3615],
[-73.2915, -34.3912],
[-73.3522, -34.449],
[-73.3993, -34.5127],
[-73.4605, -34.5912],
[-73.5054, -34.6567],
[-73.5739, -34.7557],
[-73.6333, -34.8585],
[-73.6578, -34.9297],
[-73.6772, -34.9803],
[-73.704, -35.0532],
[-73.7327, -35.1129],
[-73.7596, -35.1895],
[-73.7817, -35.2586],
[-73.7949, -35.3353],
[-73.7988, -35.4082],
[-73.7928, -35.4476],
[-73.7942, -35.5074],
[-73.8133, -35.5445],
[-73.8284, -35.6078],
[-73.9549, -35.8464],
[-74.0473, -35.9901],
[-74.0809, -36.0583],
[-74.1119, -36.1154],
[-74.1667, -36.2147],
[-74.2074, -36.2937],
[-74.2436, -36.3764],
[-74.2817, -36.4442],
[-74.3294, -36.534],
[-74.3493, -36.6019],
[-74.4045, -36.719],
[-74.4342, -36.816],
[-74.4744, -36.977],
[-74.5134, -37.081],
[-74.5509, -37.2213],
[-74.5626, -37.3344],
[-74.5716, -37.4273],
[-74.5808, -37.5274],
[-74.5841, -37.5711],
[-74.5954, -37.6673],
[-74.6012, -37.7199],
[-74.6033, -37.8106],
[-74.6044, -37.8577],
[-74.6129, -37.9301],
[-74.6214, -38.0023],
[-74.6304, -38.0926],
[-74.6311, -38.1215],
[-74.6372, -38.19],
[-74.6335, -38.228],
[-74.6413, -38.2657],
[-74.6769, -38.3247],
[-74.7377, -38.3796],
[-74.7829, -38.4581],
[-74.8232, -38.5204],
[-74.8643, -38.6149],
[-74.8795, -38.6775],
[-74.8896, -38.7167],
[-74.8837, -38.758],
[-74.878, -38.8082],
[-74.8814, -38.8564]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 445,
"platecode": 292,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-74.8814, -38.8564],
[-74.9212, -38.897],
[-74.9545, -38.9501],
[-74.9628, -39.0142],
[-74.9619, -39.073],
[-74.9672, -39.1033],
[-74.9822, -39.1582],
[-75.0043, -39.222],
[-75.0197, -39.2911],
[-75.0335, -39.3956],
[-75.0417, -39.4523],
[-75.0439, -39.5443],
[-75.0456, -39.6168],
[-75.0474, -39.6893],
[-75.0467, -39.7599],
[-75.0489, -39.8516],
[-75.0503, -39.9114],
[-75.0486, -39.9343],
[-75.0458, -40.0065],
[-75.0037, -40.0086],
[-74.9999, -40.0368],
[-75.003, -40.0614],
[-75.0127, -40.0806],
[-75.0175, -40.0893],
[-75.034, -40.1048],
[-75.0692, -40.1323],
[-75.093, -40.1635],
[-75.1242, -40.2122],
[-75.1412, -40.2435],
[-75.1542, -40.2959],
[-75.165, -40.35],
[-75.1709, -40.3954],
[-75.1819, -40.4565],
[-75.1901, -40.5001],
[-75.1987, -40.5576],
[-75.2067, -40.5958],
[-75.2124, -40.6324],
[-75.2182, -40.6759],
[-75.2195, -40.7177],
[-75.2137, -40.7544],
[-75.2101, -40.7858],
[-75.2017, -40.8103],
[-75.1936, -40.847],
[-75.1924, -40.8835],
[-75.2003, -40.9181],
[-75.2151, -40.9508],
[-75.2485, -40.9954],
[-75.2723, -41.0262],
[-75.2919, -41.0675],
[-75.3087, -41.0949],
[-75.3331, -41.143],
[-75.356, -41.2187]
]
}
}]
};代码段
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>MathArrays.shuffle(array);