File
Login or Register via GitHub
<html> <head> <meta charset="utf-8"> <title>國立中興大學校園路燈分佈</title> <!-- 主要程式架構參考自 https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap?hl=zh-tw --> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> var map, heatmap; function initMap() { // 為了標示校園範圍定義一個Polyline Array // 參考自 https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=zh-tw // Define the LatLng coordinates for the polyline. var campusBoundary = [ {lat: 24.116756, lng: 120.671803}, {lat: 24.119052, lng: 120.671830}, {lat: 24.119051, lng: 120.671974}, {lat: 24.123205, lng: 120.671997}, {lat: 24.123411, lng: 120.672062}, {lat: 24.123607, lng: 120.672182}, {lat: 24.123728, lng: 120.672302}, {lat: 24.123848, lng: 120.672483}, {lat: 24.123934, lng: 120.672762}, {lat: 24.123969, lng: 120.673090}, {lat: 24.123977, lng: 120.673882}, {lat: 24.124108, lng: 120.675160}, {lat: 24.124122, lng: 120.676482}, {lat: 24.124041, lng: 120.677665}, {lat: 24.123983, lng: 120.678192}, {lat: 24.123893, lng: 120.679595}, {lat: 24.123903, lng: 120.679988}, {lat: 24.123904, lng: 120.681082}, {lat: 24.122377, lng: 120.681078}, {lat: 24.122380, lng: 120.680767}, {lat: 24.122564, lng: 120.680763}, {lat: 24.122564, lng: 120.679271}, {lat: 24.117145, lng: 120.679306}, {lat: 24.117171, lng: 120.678060}, {lat: 24.117161, lng: 120.677910}, {lat: 24.116821, lng: 120.676083}, {lat: 24.116886, lng: 120.676056}, {lat: 24.116906, lng: 120.676031}, {lat: 24.116910, lng: 120.675994}, {lat: 24.116160, lng: 120.673329}, {lat: 24.116769, lng: 120.673137}, {lat: 24.116914, lng: 120.673124}, {lat: 24.117197, lng: 120.672956}, {lat: 24.117226, lng: 120.672913}, {lat: 24.117235, lng: 120.672864}, {lat: 24.117107, lng: 120.672404}, {lat: 24.116756, lng: 120.671803} ]; // 校園所有路燈的經緯度座標在此，任何單位或個人可以自行取用 var theLight = [ { "ID" : "001", "Lat" : 24.12347, "Lng" : 120.674955, "Num" : 0 }, { "ID" : "002", "Lat" : 24.12347, "Lng" : 120.675133, "Num" : 1 }, { "ID" : "003", "Lat" : 24.12306, "Lng" : 120.674955, "Num" : 2 }, { "ID" : "004", "Lat" : 24.12306, "Lng" : 120.675133, "Num" : 3 }, { "ID" : "005", "Lat" : 24.122842, "Lng" : 120.674955, "Num" : 4 }, { "ID" : "006", "Lat" : 24.122842, "Lng" : 120.675133, "Num" : 5 }, { "ID" : "007", "Lat" : 24.122457, "Lng" : 120.675012, "Num" : 6 }, { "ID" : "008", "Lat" : 24.122457, "Lng" : 120.675065, "Num" : 7 }, { "ID" : "009", "Lat" : 24.122161, "Lng" : 120.675014, "Num" : 8 }, { "ID" : "010", "Lat" : 24.122162, "Lng" : 120.675065, "Num" : 9 }, { "ID" : "011", "Lat" : 24.121864, "Lng" : 120.675017, "Num" : 10 }, { "ID" : "012", "Lat" : 24.121865, "Lng" : 120.675065, "Num" : 11 }, { "ID" : "013", "Lat" : 24.121569, "Lng" : 120.675017, "Num" : 12 }, { "ID" : "014", "Lat" : 24.121576, "Lng" : 120.675065, "Num" : 13 }, { "ID" : "015", "Lat" : 24.121297, "Lng" : 120.675018, "Num" : 14 }, { "ID" : "016", "Lat" : 24.121299, "Lng" : 120.675065, "Num" : 15 }, { "ID" : "017", "Lat" : 24.120997, "Lng" : 120.675015, "Num" : 16 }, { "ID" : "018", "Lat" : 24.121001, "Lng" : 120.675062, "Num" : 17 }, { "ID" : "019", "Lat" : 24.12069, "Lng" : 120.675016, "Num" : 18 }, { "ID" : "020", "Lat" : 24.120698, "Lng" : 120.675066, "Num" : 19 }, { "ID" : "021", "Lat" : 24.120402, "Lng" : 120.675016, "Num" : 20 }, { "ID" : "022", "Lat" : 24.120397, "Lng" : 120.675065, "Num" : 21 }, { "ID" : "023", "Lat" : 24.120108, "Lng" : 120.675018, "Num" : 22 }, { "ID" : "024", "Lat" : 24.120113, "Lng" : 120.675063, "Num" : 23 }, { "ID" : "025", "Lat" : 24.119866, "Lng" : 120.675017, "Num" : 24 }, { "ID" : "026", "Lat" : 24.119863, "Lng" : 120.675064, "Num" : 25 }, { "ID" : "027", "Lat" : 24.119617, "Lng" : 120.675015, "Num" : 26 }, { "ID" : "028", "Lat" : 24.119622, "Lng" : 120.675064, "Num" : 27 }, { "ID" : "029", "Lat" : 24.119365, "Lng" : 120.675017, "Num" : 28 }, { "ID" : "030", "Lat" : 24.119373, "Lng" : 120.675063, "Num" : 29 }, { "ID" : "031", "Lat" : 24.12144, "Lng" : 120.672523, "Num" : 30 }, { "ID" : "032", "Lat" : 24.121415, "Lng" : 120.672522, "Num" : 31 }, { "ID" : "033", "Lat" : 24.121443, "Lng" : 120.672785, "Num" : 32 }, { "ID" : "034", "Lat" : 24.121417, "Lng" : 120.672781, "Num" : 33 }, { "ID" : "035", "Lat" : 24.12144, "Lng" : 120.673027, "Num" : 34 }, { "ID" : "036", "Lat" : 24.121418, "Lng" : 120.673027, "Num" : 35 }, { "ID" : "037", "Lat" : 24.121449, "Lng" : 120.673331, "Num" : 36 }, { "ID" : "038", "Lat" : 24.121426, "Lng" : 120.673334, "Num" : 37 }, { "ID" : "039", "Lat" : 24.121448, "Lng" : 120.673896, "Num" : 38 }, { "ID" : "040", "Lat" : 24.121425, "Lng" : 120.673899, "Num" : 39 }, { "ID" : "041", "Lat" : 24.121447, "Lng" : 120.674313, "Num" : 40 }, { "ID" : "042", "Lat" : 24.121422, "Lng" : 120.67431, "Num" : 41 }, { "ID" : "043", "Lat" : 24.121446, "Lng" : 120.674714, "Num" : 42 }, { "ID" : "044", "Lat" : 24.121423, "Lng" : 120.674714, "Num" : 43 }, { "ID" : "045", "Lat" : 24.121446, "Lng" : 120.675396, "Num" : 44 }, { "ID" : "046", "Lat" : 24.121424, "Lng" : 120.675396, "Num" : 45 }, { "ID" : "047", "Lat" : 24.121446, "Lng" : 120.675742, "Num" : 46 }, { "ID" : "048", "Lat" : 24.121424, "Lng" : 120.675742, "Num" : 47 }, { "ID" : "049", "Lat" : 24.121446, "Lng" : 120.676176, "Num" : 48 }, { "ID" : "050", "Lat" : 24.121424, "Lng" : 120.676176, "Num" : 49 }, { "ID" : "051", "Lat" : 24.121446, "Lng" : 120.676506, "Num" : 50 }, { "ID" : "052", "Lat" : 24.121424, "Lng" : 120.676504, "Num" : 51 }, { "ID" : "053", "Lat" : 24.121446, "Lng" : 120.676969, "Num" : 52 }, { "ID" : "054", "Lat" : 24.121424, "Lng" : 120.676969, "Num" : 53 }, { "ID" : "055", "Lat" : 24.121447, "Lng" : 120.677597, "Num" : 54 }, { "ID" : "056", "Lat" : 24.121413, "Lng" : 120.677598, "Num" : 55 }, { "ID" : "057", "Lat" : 24.121467, "Lng" : 120.678197, "Num" : 56 }, { "ID" : "058", "Lat" : 24.121435, "Lng" : 120.678196, "Num" : 57 }, { "ID" : "059", "Lat" : 24.121465, "Lng" : 120.678468, "Num" : 58 }, { "ID" : "060", "Lat" : 24.121428, "Lng" : 120.678467, "Num" : 59 }, { "ID" : "061", "Lat" : 24.121465, "Lng" : 120.678729, "Num" : 60 }, { "ID" : "062", "Lat" : 24.121428, "Lng" : 120.678722, "Num" : 61 }, { "ID" : "063", "Lat" : 24.123418, "Lng" : 120.678856, "Num" : 62 }, { "ID" : "064", "Lat" : 24.123367, "Lng" : 120.678454, "Num" : 63 }, { "ID" : "065", "Lat" : 24.123365, "Lng" : 120.678064, "Num" : 64 }, { "ID" : "066", "Lat" : 24.12314, "Lng" : 120.677961, "Num" : 65 }, { "ID" : "067", "Lat" : 24.122611, "Lng" : 120.677955, "Num" : 66 }, { "ID" : "068", "Lat" : 24.122167, "Lng" : 120.677958, "Num" : 67 }, { "ID" : "069", "Lat" : 24.121784, "Lng" : 120.677965, "Num" : 68 }, { "ID" : "070", "Lat" : 24.121355, "Lng" : 120.677956, "Num" : 69 }, { "ID" : "071", "Lat" : 24.120943, "Lng" : 120.677955, "Num" : 70 }, { "ID" : "072", "Lat" : 24.12027, "Lng" : 120.678829, "Num" : 71 }, { "ID" : "073", "Lat" : 24.120229, "Lng" : 120.678827, "Num" : 72 }, { "ID" : "074", "Lat" : 24.120272, "Lng" : 120.678622, "Num" : 73 }, { "ID" : "075", "Lat" : 24.120229, "Lng" : 120.678621, "Num" : 74 }, { "ID" : "076", "Lat" : 24.120272, "Lng" : 120.678353, "Num" : 75 }, { "ID" : "077", "Lat" : 24.120226, "Lng" : 120.678354, "Num" : 76 }, { "ID" : "078", "Lat" : 24.120266, "Lng" : 120.677994, "Num" : 77 }, { "ID" : "079", "Lat" : 24.120226, "Lng" : 120.67799, "Num" : 78 }, { "ID" : "080", "Lat" : 24.120269, "Lng" : 120.677557, "Num" : 79 }, { "ID" : "081", "Lat" : 24.120226, "Lng" : 120.677558, "Num" : 80 }, { "ID" : "082", "Lat" : 24.120273, "Lng" : 120.677006, "Num" : 81 }, { "ID" : "083", "Lat" : 24.120227, "Lng" : 120.677007, "Num" : 82 }, { "ID" : "084", "Lat" : 24.120271, "Lng" : 120.676423, "Num" : 83 }, { "ID" : "085", "Lat" : 24.120232, "Lng" : 120.67642, "Num" : 84 }, { "ID" : "086", "Lat" : 24.120272, "Lng" : 120.676142, "Num" : 85 }, { "ID" : "087", "Lat" : 24.120229, "Lng" : 120.676143, "Num" : 86 }, { "ID" : "088", "Lat" : 24.120272, "Lng" : 120.675752, "Num" : 87 }, { "ID" : "089", "Lat" : 24.120228, "Lng" : 120.67575, "Num" : 88 }, { "ID" : "090", "Lat" : 24.120272, "Lng" : 120.675335, "Num" : 89 }, { "ID" : "091", "Lat" : 24.120242, "Lng" : 120.675336, "Num" : 90 }, { "ID" : "092", "Lat" : 24.11893, "Lng" : 120.675572, "Num" : 91 }, { "ID" : "093", "Lat" : 24.11893, "Lng" : 120.675253, "Num" : 92 }, { "ID" : "094", "Lat" : 24.11893, "Lng" : 120.674871, "Num" : 93 }, { "ID" : "095", "Lat" : 24.11893, "Lng" : 120.674491, "Num" : 94 }, { "ID" : "096", "Lat" : 24.119643, "Lng" : 120.67363, "Num" : 95 }, { "ID" : "097", "Lat" : 24.119643, "Lng" : 120.67358, "Num" : 96 }, { "ID" : "098", "Lat" : 24.119967, "Lng" : 120.673637, "Num" : 97 }, { "ID" : "099", "Lat" : 24.119961, "Lng" : 120.673578, "Num" : 98 }, { "ID" : "100", "Lat" : 24.120587, "Lng" : 120.673625, "Num" : 99 }, { "ID" : "101", "Lat" : 24.120583, "Lng" : 120.673582, "Num" : 100 }, { "ID" : "102", "Lat" : 24.121124, "Lng" : 120.673634, "Num" : 101 }, { "ID" : "103", "Lat" : 24.12112, "Lng" : 120.673579, "Num" : 102 }, { "ID" : "104", "Lat" : 24.121763, "Lng" : 120.673623, "Num" : 103 }, { "ID" : "105", "Lat" : 24.121763, "Lng" : 120.673578, "Num" : 104 }, { "ID" : "106", "Lat" : 24.122285, "Lng" : 120.673625, "Num" : 105 }, { "ID" : "107", "Lat" : 24.122285, "Lng" : 120.673576, "Num" : 106 }, { "ID" : "108", "Lat" : 24.12275, "Lng" : 120.673636, "Num" : 107 }, { "ID" : "109", "Lat" : 24.122755, "Lng" : 120.673591, "Num" : 108 }, { "ID" : "110", "Lat" : 24.123134, "Lng" : 120.673636, "Num" : 109 }, { "ID" : "111", "Lat" : 24.123132, "Lng" : 120.673591, "Num" : 110 }, { "ID" : "112", "Lat" : 24.122659, "Lng" : 120.673286, "Num" : 111 }, { "ID" : "113", "Lat" : 24.122627, "Lng" : 120.67328, "Num" : 112 }, { "ID" : "114", "Lat" : 24.122672, "Lng" : 120.673707, "Num" : 113 }, { "ID" : "115", "Lat" : 24.122664, "Lng" : 120.674131, "Num" : 114 }, { "ID" : "116", "Lat" : 24.12265, "Lng" : 120.674544, "Num" : 115 }, { "ID" : "117", "Lat" : 24.122646, "Lng" : 120.674887, "Num" : 116 }, { "ID" : "118", "Lat" : 24.122795, "Lng" : 120.675198, "Num" : 117 }, { "ID" : "119", "Lat" : 24.122801, "Lng" : 120.675473, "Num" : 118 }, { "ID" : "120", "Lat" : 24.122799, "Lng" : 120.675728, "Num" : 119 }, { "ID" : "121", "Lat" : 24.122799, "Lng" : 120.675951, "Num" : 120 }, { "ID" : "122", "Lat" : 24.12273, "Lng" : 120.676096, "Num" : 121 }, { "ID" : "123", "Lat" : 24.12273, "Lng" : 120.676238, "Num" : 122 }, { "ID" : "124", "Lat" : 24.122729, "Lng" : 120.676504, "Num" : 123 }, { "ID" : "125", "Lat" : 24.123011, "Lng" : 120.677676, "Num" : 124 }, { "ID" : "126", "Lat" : 24.123018, "Lng" : 120.677209, "Num" : 125 }, { "ID" : "127", "Lat" : 24.123014, "Lng" : 120.676887, "Num" : 126 }, { "ID" : "128", "Lat" : 24.123264, "Lng" : 120.676734, "Num" : 127 }, { "ID" : "129", "Lat" : 24.122708, "Lng" : 120.676739, "Num" : 128 }, { "ID" : "130", "Lat" : 24.122326, "Lng" : 120.676739, "Num" : 129 }, { "ID" : "131", "Lat" : 24.122058, "Lng" : 120.676736, "Num" : 130 }, { "ID" : "132", "Lat" : 24.121588, "Lng" : 120.676739, "Num" : 131 }, { "ID" : "133", "Lat" : 24.121286, "Lng" : 120.676674, "Num" : 132 }, { "ID" : "134", "Lat" : 24.120805, "Lng" : 120.676677, "Num" : 133 }, { "ID" : "135", "Lat" : 24.1206, "Lng" : 120.676667, "Num" : 134 }, { "ID" : "136", "Lat" : 24.120419, "Lng" : 120.676665, "Num" : 135 }, { "ID" : "137", "Lat" : 24.120086, "Lng" : 120.676667, "Num" : 136 }, { "ID" : "138", "Lat" : 24.119965, "Lng" : 120.676665, "Num" : 137 }, { "ID" : "139", "Lat" : 24.12025, "Lng" : 120.673284, "Num" : 138 }, { "ID" : "140", "Lat" : 24.120218, "Lng" : 120.673283, "Num" : 139 }, { "ID" : "141", "Lat" : 24.120251, "Lng" : 120.672865, "Num" : 140 }, { "ID" : "142", "Lat" : 24.120202, "Lng" : 120.672864, "Num" : 141 }, { "ID" : "143", "Lat" : 24.12362, "Lng" : 120.673698, "Num" : 142 }, { "ID" : "144", "Lat" : 24.11893, "Lng" : 120.674141, "Num" : 143 }, { "ID" : "145", "Lat" : 24.118933, "Lng" : 120.676334, "Num" : 144 }, { "ID" : "146", "Lat" : 24.118931, "Lng" : 120.676741, "Num" : 145 }, { "ID" : "147", "Lat" : 24.118927, "Lng" : 120.677138, "Num" : 146 }, { "ID" : "148", "Lat" : 24.118925, "Lng" : 120.677532, "Num" : 147 }, { "ID" : "149", "Lat" : 24.118506, "Lng" : 120.677952, "Num" : 148 }, { "ID" : "150", "Lat" : 24.118404, "Lng" : 120.677974, "Num" : 149 }, { "ID" : "151", "Lat" : 24.118404, "Lng" : 120.678196, "Num" : 150 }, { "ID" : "152", "Lat" : 24.118458, "Lng" : 120.678705, "Num" : 151 }, { "ID" : "153", "Lat" : 24.118572, "Lng" : 120.678903, "Num" : 152 }, { "ID" : "154", "Lat" : 24.119406, "Lng" : 120.678142, "Num" : 153 }, { "ID" : "155", "Lat" : 24.119503, "Lng" : 120.678197, "Num" : 154 }, { "ID" : "156", "Lat" : 24.1195, "Lng" : 120.678329, "Num" : 155 }, { "ID" : "157", "Lat" : 24.119288, "Lng" : 120.678791, "Num" : 156 }, { "ID" : "158", "Lat" : 24.119379, "Lng" : 120.678904, "Num" : 157 }, { "ID" : "159", "Lat" : 24.11947, "Lng" : 120.679005, "Num" : 158 }, { "ID" : "160", "Lat" : 24.119571, "Lng" : 120.679097, "Num" : 159 } ]; getPoints = []; for (var i = 0; i < theLight.length; i++){ getPoints.push(new google.maps.LatLng(theLight[i].Lat, theLight[i].Lng)); } map = new google.maps.Map(document.getElementById('map'), { zoom: 17, mapTypeId: google.maps.MapTypeId.HYBRID, center: {lat: 24.121438, lng: 120.675038 } }); // 依據陣列標示校園範圍 // 參考自 https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=zh-tw // Construct the polyline. var campusPolyline = new google.maps.Polyline({ path: campusBoundary, geodesic: true, strokeColor: '#0000FF', strokeOpacity: 0.3, strokeWeight: 3 }); campusPolyline.setMap(map); heatmap = new google.maps.visualization.HeatmapLayer({ data: getPoints, radius: 25, opacity: 0.5, gradient: [ 'rgba(0, 0, 255, 0)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 255, 255, 1)', 'rgba(191, 191, 130, 1)', 'rgba(255, 255, 100, 1)' ], map: map }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=visualization&callback=initMap"> </script> </body></html>
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers