กิจกรรม

เลือกแพลตฟอร์ม: 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 เมื่อเกิดเหตุการณ์ดังกล่าว ตัวอย่างเช่น โดยปกติเหตุการณ์ 'click' ของ UI จะส่ง 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 ไม่รองรับข้อมูลอินสแตนซ์ "ส่วนตัว" แต่รองรับ closure ซึ่งทำให้ฟังก์ชันภายในเข้าถึงตัวแปรภายนอกได้ การปิดมีประโยชน์ภายใน 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)

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>

    <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. 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

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

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