Google 地圖:HTML5/JavaScript

畫面


原始碼

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>台灣氣象溫度查詢</title>
      <style>
         html, body, #map-canvas {
         height: 100%;
         margin: 0px;
         padding: 0px
         }
      </style>
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>
      <script>
         function callGoogleMap(lat_f, long_f, scale_d, divTag) {
           var mapOptions = {
         	zoom: scale_d,
         	center: new google.maps.LatLng(lat_f, long_f)
           };
         
           var map = new google.maps.Map(document.getElementById(divTag), mapOptions);
         
           var weatherLayer = new google.maps.weather.WeatherLayer({
         	temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
           });
           weatherLayer.setMap(map);
         
           var cloudLayer = new google.maps.weather.CloudLayer();
           cloudLayer.setMap(map);
         }
         
         function goMap() {
         	var lat_f = 0;
         	var long_f = 0;
         	var locID = parseInt(document.getElementById('Location').value);
         	var scale_d = parseInt(document.getElementById('Scale').value);
         	
         	switch (locID) {
         		case 1:
         			lat_f = 25.03;
         			long_f = 121.3;
         			break;
         		case 2:
         			lat_f = 24.48;
         			long_f = 120.50;
         			break;
         		case 3:
         			lat_f = 24.09;
         			long_f = 120.40;
         			break;
         		case 4:
         			lat_f = 22.38;
         			long_f = 120.17;
         			break;
         		default:
         			lat_f = 25.03;
         			long_f = 121.3;					
         	}
         	
         	callGoogleMap(lat_f, long_f, scale_d, 'map-canvas');
         }
         
      </script>
   </head>
   <body>
      <form>
         <table>
            <tr>
               <td>
                  <select id='Location'>
                     <option value='1'>台北市</option>
                     <option value='2'>新竹市</option>
                     <option value='3'>台中市</option>
                     <option value='4'>高雄市</option>
                  </select>
               </td>
               <td>
                  <select id='Scale'>
                     <option value='6'>6</option>
                     <option value='8'>8</option>
                     <option value='10'>10</option>
                     <option value='12'>12</option>
                  </select>
               </td>
               <td>
                  <input type='button' onClick='goMap()' value='顯示'>
               </td>
            </tr>
         </table>
      </form>
      <hr>
      <div id="map-canvas">地圖</div>
   </body>
</html>

統計圖表

ċ
ShowWeatherMap-Simple.html
(2k)
李智,
Nov 11, 2014, 6:00 PM
ċ
ShowWeatherMap.html
(3k)
李智,
Nov 11, 2014, 5:55 PM