Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

หน้านี้ได้รับการแปลโดย Cloud Translation API

ย้ายข้อมูลไปยังเครื่องหมายขั้นสูง

ในวันที่ 21 กุมภาพันธ์ 2024 (v3.56) เราจะเลิกใช้งาน google.maps.Marker เราขอแนะนำให้คุณเปลี่ยนไปใช้google.maps.marker.AdvancedMarkerElement ชั้นเรียนใหม่ เครื่องหมายขั้นสูงช่วยปรับปรุงได้อย่างมากเมื่อเทียบกับคลาส google.maps.Marker รุ่นเดิม ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลิกใช้งานนี้

หากต้องการอัปเดตเครื่องหมายเดิมให้เป็นเครื่องหมายขั้นสูง ให้ทำตามขั้นตอนต่อไปนี้

เพิ่มโค้ดเพื่อนำเข้าไลบรารีเครื่องหมาย (ดูขั้นตอนด้านล่าง)
เปลี่ยน google.maps.Marker เป็น google.maps.marker.AdvancedMarkerElement; หากคำสั่งนำเข้าประกาศ AdvancedMarker คุณจะละเว้นเส้นทางที่ผ่านการรับรองได้
เพิ่มรหัสแผนที่ลงในโค้ดการเริ่มต้นแผนที่ เช่น mapId: 'DEMO_MAP_ID' เพื่อวัตถุประสงค์ในการทดสอบหากคุณยังไม่มีรหัสแผนที่

เพิ่มไลบรารีเครื่องหมายขั้นสูง

วิธีการโหลดไลบรารีจะขึ้นอยู่กับวิธีที่หน้าเว็บโหลด Maps JavaScript API

หากหน้าเว็บใช้การนำเข้าไลบรารีแบบไดนามิก ให้เพิ่มไลบรารีเครื่องหมายและ นำเข้า AdvancedMarkerElement (และ PinElement หากต้องการ) ที่รันไทม์ ดังที่ แสดงที่นี่
```
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
```
หากหน้าเว็บใช้แท็กการโหลดสคริปต์โดยตรงแบบเดิม ให้เพิ่ม libraries=marker ลงในสคริปต์การโหลดตามที่แสดงในข้อมูลโค้ดต่อไปนี้
```
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>
```

ดูข้อมูลเพิ่มเติมเกี่ยวกับการโหลด Maps JavaScript API

ตัวอย่าง

ตัวอย่างโค้ดต่อไปนี้แสดงโค้ดสําหรับการเพิ่มเครื่องหมายเดิม ตามด้วย โค้ดสําหรับตัวอย่างเดียวกันโดยใช้เครื่องหมายขั้นสูง

ก่อนการย้ายข้อมูล

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

หลังการย้ายข้อมูล

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new Map(document.getElementById("map"),  {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});

// The advanced marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

สำรวจฟีเจอร์เครื่องหมายขั้นสูง

คุณปรับแต่งเครื่องหมายขั้นสูงได้ในแบบที่ก่อนหน้านี้ทำไม่ได้ ตอนนี้คุณสามารถปรับขนาด (สเกล) ของเครื่องหมาย รวมถึงเปลี่ยนสีของ พื้นหลัง เส้นขอบ และสัญลักษณ์ได้แล้ว รูปภาพกราฟิกที่กำหนดเองใช้งานได้ง่ายขึ้น และตอนนี้คุณสามารถเขียนเครื่องหมายที่กำหนดเองโดยใช้ HTML และ CSS ได้แล้ว ดูข้อมูลเพิ่มเติม เกี่ยวกับทุกสิ่งที่คุณทำได้ด้วยเครื่องหมายขั้นสูง