เหตุการณ์

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

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

เหตุการณ์ในอินเทอร์เฟซผู้ใช้

JavaScript ภายในเบราว์เซอร์ขับเคลื่อนด้วยเหตุการณ์ ซึ่งหมายความว่า JavaScript จะตอบสนองต่อการโต้ตอบด้วยการสร้างเหตุการณ์ และคาดหวังให้โปรแกรมฟังเหตุการณ์ที่น่าสนใจ เหตุการณ์มี 2 ประเภท ได้แก่

  • เหตุการณ์ของผู้ใช้ (เช่น เหตุการณ์ "คลิก") เกี่ยวกับเมาส์จะกระจายจาก DOM ไปยัง Maps JavaScript API เหตุการณ์เหล่านี้แยกกันและแตกต่างจากเหตุการณ์ DOM มาตรฐาน
  • การแจ้งเตือนการเปลี่ยนสถานะ MVC จะแสดงการเปลี่ยนแปลงในออบเจ็กต์ Maps JavaScript API และตั้งชื่อโดยใช้รูปแบบ property_changed

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

ตัวอย่างต่อไปนี้จะแสดงให้เห็นว่า google.maps.Map ทริกเกอร์เหตุการณ์ใดเมื่อคุณโต้ตอบกับแผนที่

ดูรายการเหตุการณ์ทั้งหมดได้ในเอกสารอ้างอิง Maps JavaScript API เหตุการณ์จะแสดงในส่วนแยกต่างหากสำหรับแต่ละออบเจ็กต์ที่มีเหตุการณ์

เหตุการณ์ UI

ออบเจ็กต์บางอย่างภายใน Maps JavaScript API ออกแบบมาเพื่อตอบสนองต่อเหตุการณ์ของผู้ใช้ เช่น เหตุการณ์เมาส์หรือแป้นพิมพ์ เช่น เหตุการณ์ของผู้ใช้ที่ออบเจ็กต์ google.maps.marker.AdvancedMarkerElement ฟังได้มีดังนี้

  • 'click'
  • 'drag'
  • 'dragend'
  • 'dragstart'
  • 'gmp-click'

ดูรายการทั้งหมดได้ที่คลาส AdvancedMarkerElement เหตุการณ์เหล่านี้อาจดูเหมือนเหตุการณ์ DOM มาตรฐาน แต่จริงๆ แล้วเป็นส่วนหนึ่งของ Maps JavaScript API เนื่องจากเบราว์เซอร์ต่างๆ ใช้โมเดลเหตุการณ์ DOM ที่ต่างกัน Maps JavaScript API จึงมีกลไกเหล่านี้ไว้คอยตรวจจับและตอบสนองต่อเหตุการณ์ DOM โดยไม่ต้องคอยจัดการสิ่งต่างๆ ที่มีความแปลกใหม่จากหลายเบราว์เซอร์ โดยทั่วไปเหตุการณ์เหล่านี้จะส่งอาร์กิวเมนต์ภายในเหตุการณ์ที่ระบุสถานะ UI บางอย่าง (เช่น ตำแหน่งเมาส์)

การเปลี่ยนแปลงสถานะ MVC

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

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

จัดการเหตุการณ์

หากต้องการลงทะเบียนรับการแจ้งเตือนเหตุการณ์ ให้ใช้เครื่องจัดการเหตุการณ์ addListener() เมธอดดังกล่าวจะใช้เหตุการณ์เพื่อรอรับและฟังก์ชันในการเรียกใช้เมื่อเหตุการณ์ที่ระบุเกิดขึ้น

ตัวอย่าง: เหตุการณ์แผนที่และเครื่องหมาย

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

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const myLatlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatlng,
      mapId: "DEMO_MAP_ID",
    }
  );

  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position as google.maps.LatLng);
    }, 3000);
  });

  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position as google.maps.LatLng);
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
    mapId: "DEMO_MAP_ID",
  });
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position);
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position);
  });
}

initMap();
index.js
ดูตัวอย่าง

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

เคล็ดลับ: หากคุณพยายามตรวจจับการเปลี่ยนแปลงในวิวพอร์ต อย่าลืมใช้เหตุการณ์ bounds_changed ที่เจาะจงแทนเหตุการณ์ zoom_changed และ center_changed ประกอบ เนื่องจาก Maps JavaScript API จะเริ่มการทํางานของเหตุการณ์หลังเหล่านี้อย่างอิสระ getBounds() อาจไม่รายงานผลลัพธ์ที่เป็นประโยชน์จนกว่าวิวพอร์ตจะมีการเปลี่ยนแปลงที่เชื่อถือได้ หากต้องการgetBounds() หลังจากเหตุการณ์ดังกล่าว โปรดฟังเหตุการณ์ bounds_changed แทน

ตัวอย่าง: การแก้ไขรูปร่างและการลากเหตุการณ์

เมื่อมีการแก้ไขหรือลากรูปร่าง เหตุการณ์จะเริ่มทำงานเมื่อการดำเนินการเสร็จสิ้น ดูรายการเหตุการณ์และข้อมูลโค้ดบางส่วนได้ที่รูปร่าง

ดูตัวอย่าง (rectangle-event.html)

เข้าถึงอาร์กิวเมนต์ในเหตุการณ์ UI

โดยทั่วไปเหตุการณ์ UI ภายใน Maps JavaScript API มักจะส่งอาร์กิวเมนต์ของเหตุการณ์ ซึ่ง Listener เหตุการณ์จะเข้าถึงได้ เพื่อระบุสถานะ UI เมื่อเกิดเหตุการณ์ขึ้น ตัวอย่างเช่น โดยทั่วไปเหตุการณ์ UI 'click' จะส่ง MouseEvent ที่มีพร็อพเพอร์ตี้ latLng ซึ่งแสดงถึงตำแหน่งที่คลิกบนแผนที่ โปรดทราบว่าลักษณะการทำงานนี้จะไม่ซ้ำกันในเหตุการณ์ UI โดยการเปลี่ยนสถานะ MVC จะไม่ส่งผ่านอาร์กิวเมนต์ในเหตุการณ์

คุณจะเข้าถึงอาร์กิวเมนต์ของเหตุการณ์ภายใน Listener เหตุการณ์ได้ในลักษณะเดียวกับที่จะเข้าถึงพร็อพเพอร์ตี้ของออบเจ็กต์ ตัวอย่างต่อไปนี้เพิ่ม Listener เหตุการณ์สำหรับแผนที่ และสร้างเครื่องหมายเมื่อผู้ใช้คลิกแผนที่ในตำแหน่งที่คลิก

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng, map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.js
ดูตัวอย่าง

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

ใช้การปิดใน Listener เหตุการณ์

ขณะเรียกใช้ Listener เหตุการณ์ การแนบทั้งข้อมูลส่วนตัวและข้อมูลถาวรไว้กับออบเจ็กต์มักจะเป็นประโยชน์ JavaScript ไม่รองรับข้อมูลอินสแตนซ์ "ส่วนตัว" แต่รองรับการปิดซึ่งอนุญาตให้ฟังก์ชันภายในเข้าถึงตัวแปรภายนอก การปิดมีประโยชน์ภายใน Listener เหตุการณ์เพื่อเข้าถึงตัวแปรที่โดยปกติไม่ได้แนบอยู่กับออบเจ็กต์ที่เหตุการณ์เกิดขึ้น

ตัวอย่างต่อไปนี้ใช้การปิดฟังก์ชันใน Listener เหตุการณ์เพื่อกำหนดข้อความลับให้กับชุดตัวทำเครื่องหมาย การคลิกที่เครื่องหมายแต่ละรายการจะแสดงส่วนหนึ่งของข้อความลับ ซึ่งไม่ได้อยู่ภายในตัวทำเครื่องหมาย

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  const bounds: google.maps.LatLngBoundsLiteral = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(
  marker: google.maps.marker.AdvancedMarkerElement,
  secretMessage: string
) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });
  const bounds = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.js
ดูตัวอย่าง

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

รับและตั้งค่าพร็อพเพอร์ตี้ภายในเครื่องจัดการเหตุการณ์

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

หมายเหตุ: การตั้งค่าพร็อพเพอร์ตี้อย่างชัดแจ้งภายในตัวแฮนเดิลเหตุการณ์ซึ่งตอบสนองต่อการเปลี่ยนแปลงสถานะของพร็อพเพอร์ตี้นั้นอาจทำให้เกิดลักษณะการทำงานที่คาดเดาไม่ได้และ/หรือไม่พึงประสงค์ การตั้งค่าพร็อพเพอร์ตี้ดังกล่าวจะทริกเกอร์เหตุการณ์ใหม่ และหากคุณตั้งค่าพร็อพเพอร์ตี้ภายในเครื่องจัดการเหตุการณ์นี้เสมอ จนสุดท้ายอาจทำให้สร้างการวนซ้ำที่ไม่มีสิ้นสุด

ในตัวอย่างด้านล่าง เราตั้งค่าตัวแฮนเดิลเหตุการณ์ให้ตอบสนองต่อเหตุการณ์การซูมโดยเปิดหน้าต่างข้อมูลที่แสดงระดับดังกล่าว

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: originalMapCenter,
    }
  );

  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);

  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: originalMapCenter,
  });
  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);
  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom());
  });
}

initMap();
index.js
ดูตัวอย่าง

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

ฟังเหตุการณ์ DOM

โมเดลเหตุการณ์ Maps JavaScript API จะสร้างและจัดการเหตุการณ์ที่กำหนดเองของตนเอง อย่างไรก็ตาม DOM (Document Object Model) ภายในเบราว์เซอร์จะสร้างและจ่ายเหตุการณ์ของตัวเองตามโมเดลเหตุการณ์ของเบราว์เซอร์ที่ใช้งานอยู่ด้วย หากคุณต้องการบันทึกและตอบสนองต่อเหตุการณ์เหล่านี้ Maps JavaScript API มีเมธอดแบบคงที่ addDomListener() เพื่อฟังและเชื่อมโยงกับเหตุการณ์ DOM

วิธีการอํานวยความสะดวกนี้มีลายเซ็นดังที่แสดงด้านล่าง

addDomListener(instance:Object, eventName:string, handler:Function)

โดยที่ instance อาจเป็นองค์ประกอบ DOM ที่เบราว์เซอร์รองรับ ซึ่งรวมถึง

  • สมาชิกแบบลำดับชั้นของ DOM เช่น window หรือ document.body.myform
  • องค์ประกอบที่มีชื่อ เช่น document.getElementById("foo")

โปรดทราบว่า addDomListener() จะส่งเหตุการณ์ที่ระบุไปยังเบราว์เซอร์ ซึ่งจะจัดการเหตุการณ์ตามโมเดลเหตุการณ์ DOM ของเบราว์เซอร์ อย่างไรก็ตาม เบราว์เซอร์ที่ทันสมัยเกือบทั้งหมดจะรองรับ DOM ระดับ 2 เป็นอย่างน้อย (ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ระดับ DOM ได้ที่ข้อมูลอ้างอิง Mozilla DOM Level)

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapDiv = document.getElementById("map") as HTMLElement;
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const mapDiv = document.getElementById("map");
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.js

HTML

<html>
  <head>
    <title>Listening to DOM Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html
ดูตัวอย่าง

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

แม้ว่าโค้ดข้างต้นจะเป็นโค้ด Maps JavaScript API แต่เมธอด addDomListener() จะเชื่อมโยงกับออบเจ็กต์ window ของเบราว์เซอร์ และช่วยให้ API สื่อสารกับออบเจ็กต์ที่อยู่นอกโดเมนปกติของ API ได้

นำ Listener เหตุการณ์ออก

หากต้องการนำ Listener เหตุการณ์ที่เฉพาะเจาะจงออก คุณต้องกำหนด Listener เหตุการณ์ให้กับตัวแปร จากนั้นคุณจะเรียกใช้ removeListener() ได้โดยส่งผ่านชื่อตัวแปรที่กำหนด Listener ให้

var listener1 = marker.addListener('click', aFunction);

google.maps.event.removeListener(listener1);

หากต้องการนำ Listener ทั้งหมดออกจากอินสแตนซ์หนึ่งๆ ให้เรียกใช้ clearInstanceListeners() ที่ส่งผ่านชื่ออินสแตนซ์

var listener1 = marker.addListener('click', aFunction);
var listener2 = marker.addListener('mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

หากต้องการนำ Listener ทั้งหมดของประเภทเหตุการณ์ที่เฉพาะเจาะจงของอินสแตนซ์ที่เฉพาะเจาะจงออก ให้เรียกใช้ clearListeners() โดยส่งผ่านชื่ออินสแตนซ์และชื่อเหตุการณ์

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);

// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

ดูข้อมูลเพิ่มเติมได้จากเอกสารอ้างอิงสำหรับ เนมสเปซ google.maps.event

ฟังข้อผิดพลาดในการตรวจสอบสิทธิ์

หากต้องการตรวจหาความล้มเหลวในการตรวจสอบสิทธิ์โดยใช้โปรแกรม (เช่น เพื่อส่งบีคอนโดยอัตโนมัติ) ให้เตรียมฟังก์ชันเรียกกลับ หากมีการกำหนดฟังก์ชันส่วนกลางต่อไปนี้ ระบบจะเรียกใช้เมื่อการตรวจสอบสิทธิ์ล้มเหลว function gm_authFailure() { /* Code */ };