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

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

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

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

TypeScript

async function init(): Promise<void> {
    const { TrafficLayer } = await google.maps.importLibrary('maps');

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const trafficLayer = new TrafficLayer();

    trafficLayer.setMap(innerMap);
}

void init();

JavaScript

async function init() {
    const { TrafficLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const trafficLayer = new TrafficLayer();

    trafficLayer.setMap(innerMap);
}

void init();
ดูตัวอย่าง

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

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

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

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