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

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

เลเยอร์การรับส่งข้อมูล

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

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

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