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

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

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

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
ดูตัวอย่าง

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

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