เลเยอร์การจราจร ขนส่งสาธารณะ และจักรยาน

เลเยอร์การจราจร ขนส่งสาธารณะ และจักรยานจะแก้ไขเลเยอร์แผนที่พื้นฐานเพื่อแสดงสภาพการจราจร เครือข่ายขนส่งสาธารณะในท้องถิ่น หรือข้อมูลเส้นทางจักรยาน เลเยอร์เหล่านี้มีให้บริการในบางภูมิภาค

เลเยอร์การเข้าชม

Maps JavaScript API ช่วยให้คุณเพิ่มข้อมูลการจราจรแบบเรียลไทม์ (หากรองรับ) ลงในแผนที่ได้โดยใช้ออบเจ็กต์ TrafficLayer ระบบจะรีเฟรชข้อมูลการเข้าชมบ่อยๆ แต่ไม่ได้รีเฟรชโดยทันที คําขอต่อเนื่องอย่างรวดเร็วสําหรับพื้นที่เดียวกันอาจไม่ทําให้เกิดผลลัพธ์ที่ต่างกัน

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 34.04924594193164, lng: -118.24104309082031 },
    }
  );

  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 34.04924594193164, lng: -118.24104309082031 },
  });
  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

window.initMap = initMap;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง

เลเยอร์ขนส่งสาธารณะ

Maps JavaScript API ช่วยให้คุณแสดงเครือข่ายขนส่งสาธารณะของเมืองบนแผนที่ได้โดยใช้ออบเจ็กต์ TransitLayer เมื่อเปิดใช้เลเยอร์ขนส่งสาธารณะและแผนที่มีจุดศูนย์กลางอยู่ที่เมืองที่รองรับข้อมูลการขนส่งสาธารณะ แผนที่จะแสดงเส้นทางขนส่งสาธารณะที่สําคัญเป็นเส้นสีหนา สีของเส้นจะกําหนดตามข้อมูลจากโอเปอเรเตอร์สายการขนส่งสาธารณะ การเปิดใช้เลเยอร์ขนส่งสาธารณะจะเปลี่ยนรูปแบบของแผนที่ฐานเพื่อเน้นเส้นทางขนส่งสาธารณะมากขึ้น

หากคุณเป็นหน่วยงานรัฐที่ดูแลการขนส่งสาธารณะสําหรับเมืองของคุณ และต้องการรวมข้อมูลของคุณ โปรดไปที่เว็บไซต์โปรแกรมพาร์ทเนอร์ Google แผนการเดินทางเพื่อดูข้อมูลเพิ่มเติม

ตัวอย่างต่อไปนี้แสดงเลเยอร์ขนส่งสาธารณะที่เปิดใช้ในแผนที่ของลอนดอน สหราชอาณาจักร

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 51.501904, lng: -0.115871 },
    }
  );

  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 51.501904, lng: -0.115871 },
  });
  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

window.initMap = initMap;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง

เลเยอร์จักรยาน

Maps JavaScript API ช่วยให้คุณเพิ่มข้อมูลจักรยานลงในแผนที่ได้โดยใช้ออบเจ็กต์ BicyclingLayer BicyclingLayer จะแสดงเลเยอร์เส้นทางจักรยาน เส้นทางจักรยานที่แนะนํา และการวางซ้อนอื่นๆ ที่เกี่ยวข้องกับการปั่นจักรยานที่ด้านบนของแผนที่นั้นๆ นอกจากนี้ เลเยอร์ยังเปลี่ยนรูปแบบของแผนที่ฐาน เพื่อเน้นถนนที่รองรับเส้นทางจักรยาน และเน้นถนนที่มีข้อมูล ไม่เหมาะกับจักรยาน

ตัวอย่างต่อไปนี้แสดงเลเยอร์จักรยานที่เปิดใช้ในแผนที่ของเคมบริดจ์ รัฐแมสซาชูเซตส์

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 14,
      center: { lat: 42.3726399, lng: -71.1096528 },
    }
  );

  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 42.3726399, lng: -71.1096528 },
  });
  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

window.initMap = initMap;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง

เส้นทางสีเขียวเข้มที่บ่งชี้เส้นทางจักรยานโดยเฉพาะ เส้นทางสีเขียว จะบ่งชี้ถึงถนนที่มี "เลนจักรยาน" โดยเฉพาะ เส้นทางที่เป็นเส้นประจะแสดงถนนหรือเส้นทางที่แนะนําสําหรับการขี่จักรยาน