การวางซ้อนพื้น

เลือกแพลตฟอร์ม Android iOS JavaScript

1. บทนำ
2. เพิ่มการวางซ้อนพื้น
3. นำการวางซ้อนพื้นดินออก

บทนำ

การวางซ้อนคือวัตถุบนแผนที่ที่เชื่อมโยงกับพิกัดละติจูด/ลองจิจูด ดังนั้นวัตถุจะเคลื่อนไหวเมื่อคุณลากหรือซูมแผนที่ หากต้องการวางรูปภาพบนแผนที่ ให้ใช้ออบเจ็กต์ GroundOverlay

ดูข้อมูลเกี่ยวกับการวางซ้อนประเภทอื่นๆ ได้ที่การวาดบนแผนที่

เพิ่มการวางซ้อนพื้นดิน

ตัวสร้างของ GroundOverlay จะระบุ URL ของรูปภาพและ LatLngBounds ของรูปภาพเป็นพารามิเตอร์ ระบบจะแสดงผลภาพบนแผนที่โดยจำกัดขอบเขตให้อยู่ภายในขอบเขตที่กำหนด และปรับให้เป็นไปตามการฉายแผนที่

TypeScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
let historicalOverlay;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds,
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
index.js

หมายเหตุ: ระบบจะคอมไพล์ JavaScript จากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

นำการวางซ้อนพื้นดินออก

หากต้องการนำการวางซ้อนออกจากแผนที่ ให้เรียกใช้เมธอด setMap() ของการวางซ้อนโดยส่ง null โปรดทราบว่าการเรียกใช้เมธอดนี้จะไม่ลบการวางซ้อน ซึ่งจะนำการวางซ้อนออกจากแผนที่ หากต้องการลบการวางซ้อนแทน คุณควรนำการวางซ้อนออกจากแผนที่ แล้วตั้งค่าการวางซ้อนเป็น null

function removeOverlay() {
  historicalOverlay.setMap(null);
}

ดูตัวอย่าง