วิดเจ็ตการเติมข้อความอัตโนมัติของสถานที่จะสร้างช่องป้อนข้อความ ระบุการคาดคะเนสถานที่ในรายการตัวเลือก UI และแสดงรายละเอียดสถานที่ตามการเลือกของผู้ใช้ ใช้วิดเจ็ตการเติมข้อความอัตโนมัติของสถานที่เพื่อฝังอินเทอร์เฟซผู้ใช้แบบสมบูรณ์ที่ทำงานได้เองในการเติมข้อความอัตโนมัติในหน้าเว็บ
ข้อกำหนดเบื้องต้น
หากต้องการใช้การเติมข้อความอัตโนมัติของสถานที่ (เวอร์ชันตัวอย่าง) คุณต้องเปิดใช้ "Places API" ในโปรเจ็กต์ Google Cloud และระบุช่องทางเบต้า (v: "beta"
) ในโปรแกรมโหลด Bootstrap โปรดดู
เริ่มต้นใช้งานเพื่อดูรายละเอียด
มีอะไรใหม่
ฟีเจอร์ป้อนข้อความอัตโนมัติของสถานที่ (เวอร์ชันตัวอย่าง) ได้รับการปรับปรุงในด้านต่อไปนี้
- UI ของวิดเจ็ตการเติมข้อความอัตโนมัติรองรับการแปลเป็นภาษาท้องถิ่นระดับภูมิภาค (รวมถึงภาษา RTL) สำหรับตัวยึดตําแหน่งการป้อนข้อความ โลโก้รายการการคาดคะเน และการคาดคะเนสถานที่
- การช่วยเหลือพิเศษที่ปรับปรุงแล้ว ซึ่งรวมถึงการรองรับโปรแกรมอ่านหน้าจอและการโต้ตอบด้วยแป้นพิมพ์
- วิดเจ็ตเติมข้อความอัตโนมัติจะแสดงคลาสสถานที่ใหม่ เพื่อลดความซับซ้อนในการจัดการออบเจ็กต์ที่แสดงผล
- รองรับอุปกรณ์เคลื่อนที่และหน้าจอขนาดเล็กได้ดียิ่งขึ้น
- ประสิทธิภาพที่ดีขึ้นและการแสดงผลกราฟิกที่ดีขึ้น
เพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติ
คุณสามารถเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในหน้าเว็บหรือ Google Maps ได้ วิดเจ็ตการเติมข้อความอัตโนมัติจะสร้าง
ช่องป้อนข้อความ ใส่การคาดคะเนสถานที่ในรายการตัวเลือก UI และแสดงรายละเอียดสถานที่ใน
การตอบสนองต่อการคลิกของผู้ใช้ผ่าน Listener gmp-placeselect
ส่วนนี้จะแสดงวิธีเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในหน้าเว็บหรือ Google Maps
เพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในหน้าเว็บ
หากต้องการเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในหน้าเว็บ ให้สร้าง google.maps.places.PlaceAutocompleteElement
ใหม่ แล้วเพิ่มต่อท้ายหน้าเว็บดังที่แสดงในตัวอย่างต่อไปนี้
TypeScript
// Request needed libraries. //@ts-ignore await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete);
JavaScript
// Request needed libraries. //@ts-ignore await google.maps.importLibrary("places"); // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete);
เพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในแผนที่
หากต้องการเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในแผนที่ ให้สร้างอินสแตนซ์ google.maps.places.PlaceAutocompleteElement
ใหม่ แล้วต่อท้ายด้วย
PlaceAutocompleteElement
ไปยัง div
และพุชไปยังแผนที่ตามที่กำหนดเอง
ควบคุม ดังที่ปรากฏในตัวอย่างต่อไปนี้
TypeScript
//@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = 'place-autocomplete-input'; const card = document.getElementById('place-autocomplete-card') as HTMLElement; //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
JavaScript
//@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = "place-autocomplete-input"; const card = document.getElementById("place-autocomplete-card"); //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
จำกัดการคาดคะเนการเติมข้อความอัตโนมัติ
โดยค่าเริ่มต้น การเติมข้อมูลสถานที่อัตโนมัติจะแสดงสถานที่ทุกประเภท โดยมีความเอนเอียงในการคาดคะเนที่อยู่ใกล้กับผู้ใช้ และดึงข้อมูลฟิลด์ที่มีอยู่ทั้งหมดสำหรับสถานที่ที่เลือกของผู้ใช้ ตั้งค่าตัวเลือกการเติมข้อความอัตโนมัติของสถานที่เพื่อแสดงการคาดคะเนที่เกี่ยวข้องมากขึ้นโดยการจำกัดหรือเอนเอียงผลการค้นหา
การจํากัดผลการค้นหาทําให้วิดเจ็ตการเติมข้อความอัตโนมัติไม่สนใจผลการค้นหาที่อยู่นอกพื้นที่การจํากัด แนวทางทั่วไปคือการจำกัดผลลัพธ์ให้อยู่ภายในขอบเขตของแผนที่ ผลลัพธ์การให้น้ำหนัก วิดเจ็ตการเติมข้อความอัตโนมัติจะแสดงผลลัพธ์ภายในพื้นที่ที่ระบุ แต่ผลการค้นหาที่ตรงกันทั้งหมดอาจเกิดขึ้น นอกพื้นที่ดังกล่าว
จำกัดการค้นหาสถานที่ตามประเทศ
หากต้องการจำกัดการค้นหาสถานที่ไว้ในประเทศใดประเทศหนึ่งหรือมากกว่านั้น ให้ใช้พร็อพเพอร์ตี้ componentRestrictions
เพื่อระบุรหัสประเทศตามที่แสดงในข้อมูลโค้ดต่อไปนี้
const pac = new google.maps.places.PlaceAutocompleteElement({ componentRestrictions: {country: ['us', 'au']}, });
จำกัดการค้นหาสถานที่ให้อยู่ภายในขอบเขตของแผนที่
หากต้องการจำกัดการค้นหาสถานที่ให้อยู่ภายในขอบเขตของแผนที่ ให้ใช้พร็อพเพอร์ตี้ locationRestrictions
เพื่อเพิ่มขอบเขต ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
const pac = new google.maps.places.PlaceAutocompleteElement({ locationRestriction: map.getBounds(), });
เมื่อจํากัดขอบเขตของแผนที่ อย่าลืมเพิ่ม Listener เพื่ออัปเดตขอบเขตเมื่อมีการเปลี่ยนแปลง ดังนี้
map.addListener('bounds_changed', () => { autocomplete.locationRestriction = map.getBounds(); });
หากต้องการนำ locationRestriction
ออก ให้ตั้งค่าเป็น null
การให้น้ำหนักพิเศษกับผลการค้นหาสถานที่
ให้น้ำหนักพิเศษในการวางผลการค้นหาไว้ในพื้นที่วงกลมโดยใช้พร็อพเพอร์ตี้ locationBias
และ
ผ่านรัศมีดังที่แสดงด้านล่างนี้
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}}, });
หากต้องการนำ locationBias
ออก ให้ตั้งค่าเป็น null
จำกัดผลการค้นหาสถานที่ไว้สำหรับบางประเภท
จำกัดผลการค้นหาสถานที่ไว้สำหรับสถานที่บางประเภทโดยใช้ types
ของคุณ และระบุประเภทอย่างน้อย 1 ประเภท ดังที่แสดงที่นี่
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ types: ['establishment'], });
โปรดดูรายการประเภททั้งหมดที่รองรับที่หัวข้อตาราง 3: ประเภทที่รองรับในคําขอการเติมข้อความอัตโนมัติของสถานที่
ดูรายละเอียดสถานที่
หากต้องการดูรายละเอียดสถานที่ของสถานที่ที่เลือก ให้เพิ่มโปรแกรมฟัง gmp-place-select
ลงใน PlaceAutocompleteElement
ดังที่แสดงในตัวอย่างต่อไปนี้
TypeScript
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); });
JavaScript
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); selectedPlaceTitle.textContent = "Selected Place:"; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2, ); });
ในตัวอย่างก่อนหน้านี้ Listener เหตุการณ์จะแสดงออบเจ็กต์ของ Place class
โทรหา place.fetchFields()
เพื่อรับช่องข้อมูลรายละเอียดสถานที่
ที่จำเป็นสำหรับการสมัครของคุณ
ตัวอย่างถัดไปแสดงคำสั่งที่ขอข้อมูลสถานที่และแสดงข้อมูลบนแผนที่
TypeScript
// Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' + '<span id="place-address">' + place.formattedAddress + '</span>' + '</div>'; updateInfoWindow(content, place.location); marker.position = place.location; });
JavaScript
// Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + "</span><br />" + '<span id="place-address">' + place.formattedAddress + "</span>" + "</div>"; updateInfoWindow(content, place.location); marker.position = place.location; });
ดูผลการจับคู่พิกัดภูมิศาสตร์ของสถานที่ที่เลือก
หากต้องการดูผลการเข้ารหัสพิกัดภูมิศาสตร์ของสถานที่ที่เลือก ให้ใช้ google.maps.Geocoder
เพื่อรับตำแหน่ง ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
const map = new google.maps.Map(document.getElementById('map'), { center: {lat: 50.064192, lng: -130.605469}, zoom: 3, }); const marker = new google.maps.Marker({map}); const autocomplete = new google.maps.places.PlaceAutocompleteElement(); const geocoder = new google.maps.Geocoder(); autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => { const results = await geocoder.geocode({place.id}); marker.setPlace({ placeId: place.id, location: results[0].geometry.location, }); });
ตัวอย่างแผนที่
ส่วนนี้ประกอบด้วยโค้ดทั้งหมดสำหรับตัวอย่างแผนที่ที่แสดงในหน้านี้
เติมข้อความอัตโนมัติองค์ประกอบ
ตัวอย่างนี้เพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในหน้าเว็บ และแสดงผลลัพธ์สำหรับแต่ละหน้าเว็บ สถานที่ที่เลือก
TypeScript
async function initMap(): Promise<void> { // Request needed libraries. //@ts-ignore await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement('p'); selectedPlaceTitle.textContent = ''; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement('pre'); selectedPlaceInfo.textContent = ''; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); }); } initMap();
JavaScript
async function initMap() { // Request needed libraries. //@ts-ignore await google.maps.importLibrary("places"); // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement("p"); selectedPlaceTitle.textContent = ""; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement("pre"); selectedPlaceInfo.textContent = ""; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); selectedPlaceTitle.textContent = "Selected Place:"; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2, ); }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } p { font-family: Roboto, sans-serif; font-weight: bold; }
HTML
<html> <head> <title>Place Autocomplete element</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <p style="font-family: roboto, sans-serif">Search for a place here:</p> <!-- 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: "beta"});</script> </body> </html>
ลองใช้ตัวอย่าง
เติมข้อมูลแผนที่อัตโนมัติ
ตัวอย่างนี้แสดงวิธีเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงใน Google Maps
TypeScript
let map: google.maps.Map; let marker: google.maps.marker.AdvancedMarkerElement; let infoWindow: google.maps.InfoWindow; async function initMap(): Promise<void> { // Request needed libraries. //@ts-ignore const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary("marker"), google.maps.importLibrary("places") ]); // Initialize the map. map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapId: '4504f8b37365c3d0', mapTypeControl: false, }); //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = 'place-autocomplete-input'; const card = document.getElementById('place-autocomplete-card') as HTMLElement; //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card); // Create the marker and infowindow marker = new google.maps.marker.AdvancedMarkerElement({ map, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' + '<span id="place-address">' + place.formattedAddress + '</span>' + '</div>'; updateInfoWindow(content, place.location); marker.position = place.location; }); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, anchor: marker, shouldFocus: false, }); } initMap();
JavaScript
let map; let marker; let infoWindow; async function initMap() { // Request needed libraries. //@ts-ignore const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary("marker"), google.maps.importLibrary("places"), ]); // Initialize the map. map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapId: "4504f8b37365c3d0", mapTypeControl: false, }); //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = "place-autocomplete-input"; const card = document.getElementById("place-autocomplete-card"); //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card); // Create the marker and infowindow marker = new google.maps.marker.AdvancedMarkerElement({ map, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + "</span><br />" + '<span id="place-address">' + place.formattedAddress + "</span>" + "</div>"; updateInfoWindow(content, place.location); marker.position = place.location; }); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, anchor: marker, shouldFocus: false, }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #place-autocomplete-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 5px; font-family: Roboto, sans-serif; font-size: large; font-weight: bold; } gmp-place-autocomplete { width: 300px; } #infowindow-content .title { font-weight: bold; } #map #infowindow-content { display: inline; }
HTML
<html> <head> <title>Place Autocomplete map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div class="place-autocomplete-card" id="place-autocomplete-card"> <p>Search for a place here:</p> </div> <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: "beta"});</script> </body> </html>
ลองใช้ตัวอย่าง
ใช้คอมโพเนนต์เครื่องมือเลือกสถานที่
คอมโพเนนต์เครื่องมือเลือกสถานที่คืออินพุตข้อความที่ทำให้ผู้ใช้ปลายทางค้นหา ที่อยู่หรือสถานที่ที่เฉพาะเจาะจงโดยใช้การเติมข้อความอัตโนมัติ ซึ่งเป็นส่วนหนึ่งของ Extended Component Library ชุดคอมโพเนนต์ของเว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้างคุณลักษณะแผนที่และตำแหน่งที่ดีขึ้นได้เร็วขึ้น
ใช้เครื่องมือกำหนดค่าเครื่องมือเลือกสถานที่ เพื่อสร้างโค้ดแบบฝังได้สำหรับคอมโพเนนต์เครื่องมือเลือกสถานที่ที่กำหนดเอง จากนั้นส่งออก เพื่อใช้กับเฟรมเวิร์กที่ได้รับความนิยมอย่าง React และ Angular หรือไม่มีกรอบเลย