คุณสามารถใช้ Places API และ Geocoding API ใน Maps JavaScript API เพื่อค้นหาภูมิภาค และอีกมากมาย ข้อมูลเกี่ยวกับสถานที่ต่างๆ Geocoding API และ Places API เป็นทางเลือกที่มีประสิทธิภาพและเสถียรในการรับรหัสสถานที่ หากดูแล้ว คุณจะใช้รหัสสถานที่เพื่อนำรหัสเหล่านั้นมาใช้ซ้ำได้อย่างง่ายดายด้วยการจัดรูปแบบตามข้อมูลสำหรับขอบเขต
เพิ่มสถานที่และการระบุพิกัดทางภูมิศาสตร์ลงในแอป Maps JavaScript API ของคุณใน วิธีต่อไปนี้
- Places Library, Maps JavaScript API ช่วยให้แอปค้นหาสถานที่ได้ และมีวิดเจ็ตเติมข้อความอัตโนมัติ
- Places API จะแสดงข้อมูลเกี่ยวกับสถานที่ต่างๆ โดยใช้คำขอ HTTP
- บริการเข้ารหัสพิกัดภูมิศาสตร์ และ คลาส Geocoder สามารถใส่พิกัดทางภูมิศาสตร์ได้ และเปลี่ยนรหัสพิกัดภูมิศาสตร์แบบไดนามิกจากข้อมูลที่ผู้ใช้ป้อน
- Geocoding API ช่วยให้คุณ ที่อยู่ที่ทราบและคงที่ของรหัสพิกัดภูมิศาสตร์
ใช้ Places API
ใช้การค้นหาข้อความ (ใหม่) เพื่อค้นหาภูมิภาค
คุณสามารถใช้การค้นหาข้อความ (ใหม่)
เพื่อรับรหัสสถานที่ที่มีข้อมูลภูมิภาคโดยใช้ includedType
เพื่อระบุ
ประเภทของภูมิภาค
เพื่อกลับไป การใช้ API การค้นหาข้อความ (ใหม่) เพื่อ
การขอรหัสสถานที่เพียงอย่างเดียวจะไม่มีการเรียกเก็บเงิน ดูข้อมูลเพิ่มเติม
ตัวอย่างแผนที่นี้แสดงให้เห็นการสร้างคำขอ searchByText
เพื่อให้ได้สถานที่
รหัสสำหรับตรินิแดด รัฐแคลิฟอร์เนีย แล้วใช้รูปแบบกับขอบเขต:
TypeScript
async function findBoundary() { const request = { query: 'Trinidad, CA', fields: ['id', 'location'], includedType: 'locality', locationBias: center, }; const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log('No results'); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; }
JavaScript
async function findBoundary() { const request = { query: "Trinidad, CA", fields: ["id", "location"], includedType: "locality", locationBias: center, }; const { Place } = await google.maps.importLibrary("places"); //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log("No results"); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; }
ดูตัวอย่างซอร์สโค้ดที่สมบูรณ์
TypeScript
let map; let featureLayer; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; center = {lat: 41.059, lng: -124.151}; // Trinidad, CA map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 15, // In the cloud console, configure this Map ID with a style that enables the // "Locality" Data Driven Styling type. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); featureLayer = map.getFeatureLayer('LOCALITY'); findBoundary(); } async function findBoundary() { const request = { query: 'Trinidad, CA', fields: ['id', 'location'], includedType: 'locality', locationBias: center, }; const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log('No results'); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; } initMap();
JavaScript
let map; let featureLayer; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA map = new Map(document.getElementById("map"), { center: center, zoom: 15, // In the cloud console, configure this Map ID with a style that enables the // "Locality" Data Driven Styling type. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); featureLayer = map.getFeatureLayer("LOCALITY"); findBoundary(); } async function findBoundary() { const request = { query: "Trinidad, CA", fields: ["id", "location"], includedType: "locality", locationBias: center, }; const { Place } = await google.maps.importLibrary("places"); //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { const place = places[0]; styleBoundary(place.id); map.setCenter(place.location); } else { console.log("No results"); } } function styleBoundary(placeid) { // Define a style of transparent purple with opaque stroke. const styleFill = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Define the feature style function. featureLayer.style = (params) => { if (params.feature.placeId == placeid) { return styleFill; } }; } initMap();
ใช้การเติมข้อความอัตโนมัติในสถานที่เพื่อค้นหาภูมิภาค
วิดเจ็ตเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
ช่วยให้ผู้ใช้ค้นหาภูมิภาคได้อย่างสะดวก หากต้องการกำหนดค่า
วิดเจ็ตการเติมข้อความอัตโนมัติใน Places เพื่อแสดงผลเฉพาะภูมิภาค ให้ตั้งค่า types
เป็น
(regions)
ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
fields: ["place_id", "type"],
strictBounds: false,
types: ["(regions)"],
};
ดูรายละเอียดสถานที่ของแต่ละภูมิภาค
ข้อมูลรายละเอียดสถานที่ของแต่ละภูมิภาคอาจมีประโยชน์มาก ตัวอย่างเช่น คุณสามารถ
- ค้นหารหัสสถานที่ขอบเขตตามชื่อสถานที่
- รับวิวพอร์ตเพื่อซูมถึงขอบเขต
- รับประเภทฟีเจอร์สําหรับขอบเขต (เช่น
locality
) - รับที่อยู่ที่จัดรูปแบบซึ่งจะเป็น "ชื่อสถานที่ รัฐ ประเทศ" ในภูมิภาคสหรัฐอเมริกา (เช่น "Ottumwa, IA, USA")
- ดูข้อมูลที่เป็นประโยชน์อื่นๆ เช่น รูปภาพ
ฟังก์ชันตัวอย่างต่อไปนี้จะค้นหาขอบเขตสำหรับตรินิแดด แคลิฟอร์เนีย และเซ็นเตอร์ แผนที่บนผลลัพธ์:
ฟังก์ชันตัวอย่างต่อไปนี้เรียกใช้ fetchFields()
เพื่อรับรายละเอียดสถานที่
รวมทั้ง place.geometry.viewport
จากนั้นเรียก map.fitBounds()
เพื่อจัดกึ่งกลาง
ในรูปหลายเหลี่ยมขอบเขตที่เลือก
async function getPlaceDetails(placeId) {
// Use place ID to create a new Place instance.
const place = new google.maps.places.Place({
id: placeId,
});
// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'geometry', 'type'] });
// Zoom to the boundary polygon.
let viewport = place.geometry.viewport;
map.fitBounds(viewport, 155);
// Print some place details to the console.
const types = place.types;
console.log("Feature type: " + types[0]);
console.log("Formatted address: " + place.formattedAddress);
}
ใช้ Geocoding API
Geocoding API ช่วยให้คุณสามารถ แปลงที่อยู่เป็นข้อมูลพิกัดทางภูมิศาสตร์ หรือกลับกัน ดังต่อไปนี้ ใช้รวมกับการจัดรูปแบบที่อิงตามข้อมูลสำหรับขอบเขต:
- ใช้การระบุพิกัดทางภูมิศาสตร์เพื่อรับวิวพอร์ตของภูมิภาค
- ใช้การกรองคอมโพเนนต์กับการเรียกใช้การระบุพิกัดทางภูมิศาสตร์เพื่อรับรหัสสถานที่ของ เขตบริหาร 1-4 ย่าน หรือรหัสไปรษณีย์
- ใช้การระบุพิกัดทางภูมิศาสตร์แบบย้อนกลับเพื่อค้นหารหัสสถานที่ตามพิกัดละติจูด/ลองจิจูด หรือ แม้แต่แสดงรหัสสถานที่สำหรับคอมโพเนนต์ทั้งหมดในตำแหน่งที่ตั้งหนึ่งๆ
รับวิวพอร์ตสำหรับภูมิภาค
บริการเข้ารหัสพิกัดภูมิศาสตร์สามารถใช้รหัสสถานที่และแสดงผลวิวพอร์ต ซึ่งคุณต้อง
สามารถส่งไปยัง map.fitBounds()
เพื่อซูมไปยังรูปหลายเหลี่ยมขอบเขตบนแผนที่ ตัวอย่างต่อไปนี้จะแสดง
ใช้บริการเข้ารหัสพิกัดภูมิศาสตร์เพื่อรับวิวพอร์ต จากนั้นเรียก map.fitBounds()
:
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
geocoder
.geocode({ placeId: placeid })
.then(({ results }) => {
map.fitBounds(results[0].geometry.viewport, 155);
})
.catch((e) => {
console.log('Geocoder failed due to: ' + e)
});
}
ใช้การระบุพิกัดทางภูมิศาสตร์แบบย้อนกลับ
สามารถใช้การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับเพื่อค้นหารหัสสถานที่ได้ ตัวอย่างต่อไปนี้คือ Geocoding แสดงรหัสสถานที่สำหรับองค์ประกอบที่อยู่ทั้งหมดที่ พิกัดละติจูด/ลองจิจูดที่ระบุ:
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
// Call Geocoding API.
function getPlaceIds(latLng) {
geocoder
.geocode({ latLng })
.then(({ results }) => {
console.log('Geocoding result:');
console.log(results[0]);
console.log(results[0].place_id);
console.log(results[0].address_components);
})
.catch((e) => {
console.log('Geocoder failed due to: ' + e)
});
}
นี่คือการเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับที่เทียบเท่า การเรียกใช้บริการผ่านเว็บ:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
วิธีใช้การระบุพิกัดทางภูมิศาสตร์แบบย้อนกลับกับการกรองคอมโพเนนต์เพื่อรับคอมโพเนนต์ที่อยู่ สำหรับประเภทต่อไปนี้อย่างน้อย 1 ประเภทในตำแหน่งที่ระบุ
administrativeArea
country
locality
postalCode
ฟังก์ชันตัวอย่างถัดไปแสดงการใช้บริการ Geocoding โดยเพิ่มคอมโพเนนต์
กับการระบุพิกัดทางภูมิศาสตร์แบบย้อนกลับเพื่อดูองค์ประกอบที่อยู่ทั้งหมดที่
สถานที่ตั้งที่ระบุสำหรับประเภท locality
เท่านั้น:
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
function getPlaceIdWithRestrictions(latLng) {
geocoder
.geocode({ latLng,
componentRestrictions: {
country: "US",
locality: "chicago",
},
})
.then(({ results }) => {
console.log('Geocoding result with restriction:');
console.log(results[0]);
console.log(results[0].place_id);
console.log(results[0].address_components);
console.log(results[0].address_components[1].types[0]);
console.log(results[0].address_components[1].long_name);
})
.catch((e) => {
console.log('getPlaceId Geocoder failed due to: ' + e)
});
}
นี่คือการเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับที่เทียบเท่า การเรียกใช้บริการผ่านเว็บ:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality