Taipei UBike Information Homework Hand In

[Alexius-Huang]

Click me link to my homework!

Features:

• Display the Taipei UBike data in Google Map
• Update UBike data in every 1 minute
• Filters UBike data by selecting Taipei district(s)
• Filters UBike data according to the input address and station name
• Filters UBike data which has no bike to lease
• Draw the marker with different opacity according to the bike count

[kurotanshi]

作業完成地很棒喔，功能也很完整。 用透明度來表示可能不夠明顯，這裡建議可直接用 icon 的顏色來區分，可以更容易看出站點目前的狀態。

這裡我用 Google Chart 提供的 Dynamic Icons 做範例: https://developers.google.com/chart/infographics/docs/dynamic_icons

    establishMarker: function(data) {

      let marker = new google.maps.Marker({
        position: { lat: Number(data.lat), lng: Number(data.lng) },
        map: this.googleMap.map,
        title: data.sna,
        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=bicycle|33cc33"
      });

      if (this.drawWithBikeCount) {
        let rate = Number(data.sbi) / Number(data.tot);
        let color = (rate > 0.5) ? '33cc33' : (rate > 0.2) ? 'ffff33' : 'ff3333';

        marker.setIcon("https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=bicycle|" + color);
      }