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

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

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

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

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

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