Google Map 設計開發_交通項目

最近設計開發 GoogleMap ，在此做個簡單紀錄

1. 宣告  Google Map，並且初始化

function initialize() 
{			  
   var mapOptions = 
   {
     zoom: 16,
     center: mapCenterSite,
     //TYPE: HYBRID, ROADMAP, SATELLITE, TERRAIN
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			
   google.maps.event.addDomListener( map, 'click',  function(event) 
   {
     document.getElementById('divImageFile').style.visibility ='hidden';
   });

   initMarkers();  // 客製化標籤(略)
   drawLine(map);  // 客製化路線(略)
}			

2. 在 Google Map 上面，透過JS 繪製路徑

   /*
    * 宣告 GoogleMap 路徑座標陣列
    */
   arrayLatLng = 
   [
      new google.maps.LatLng( x, y),
      new google.maps.LatLng( endPos_x, endPos_y)
   ];

   /*
    * 利用 Polyline 將該路徑座標進行人工繪製
    */
   LinePath_current = new google.maps.Polyline({
          path: arrayLatLng,
          geodesic: true,
          strokeColor: '#019D54',
          strokeOpacity: 1.0,
          strokeWeight: 4
      });

   LinePath_current.setMap(map);