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

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

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

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;

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

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

เลเยอร์การขนส่ง

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;

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

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

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

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;

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

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

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