คุณสามารถใช้ Places API และ Geocoding API ใน Maps JavaScript API เพื่อค้นหาภูมิภาคต่างๆ และดูข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ต่างๆ Geocoding API และ Places API เป็นทางเลือกที่มีประสิทธิภาพและเสถียรในการรับรหัสสถานที่ หากใช้รหัสสถานที่อยู่แล้ว คุณก็นำรหัสเหล่านั้นมาใช้ซ้ำได้อย่างง่ายดายด้วยการจัดรูปแบบตามข้อมูลสำหรับขอบเขต
เพิ่มสถานที่และการระบุพิกัดทางภูมิศาสตร์ลงในแอป Maps JavaScript API ของคุณตามวิธีต่อไปนี้
- ไลบรารีสถานที่, Maps JavaScript API ช่วยให้แอปค้นหาสถานที่และมีวิดเจ็ตเติมข้อความอัตโนมัติ
- Places API จะแสดงผลข้อมูลเกี่ยวกับสถานที่ต่างๆ โดยใช้คำขอ HTTP
- บริการเข้ารหัสพิกัดภูมิศาสตร์และคลาสเครื่องมือเข้ารหัสพิกัดภูมิศาสตร์สามารถใส่รหัสพิกัดภูมิศาสตร์และกลับรหัสพิกัดภูมิศาสตร์แบบไดนามิกจากข้อมูลของผู้ใช้ได้
- 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
) - รับที่อยู่ที่จัดรูปแบบแล้วซึ่งตรงกับ "ชื่อสถานที่ รัฐ ประเทศ" ในภูมิภาคสหรัฐอเมริกา (เช่น "ออตตัมวา ไอโอวา สหรัฐอเมริกา")
- ดูข้อมูลที่เป็นประโยชน์อื่นๆ เช่น รูปภาพ
ฟังก์ชันตัวอย่างต่อไปนี้จะค้นหาขอบเขตสำหรับตรินิแดด แคลิฟอร์เนีย และจัดให้แผนที่เป็นศูนย์กลางบนผลลัพธ์
ฟังก์ชันตัวอย่างต่อไปนี้จะเรียก 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)
});
}
ใช้การระบุพิกัดทางภูมิศาสตร์แบบย้อนกลับ
สามารถใช้การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับเพื่อค้นหารหัสสถานที่ได้ ตัวอย่างฟังก์ชันบริการการระบุพิกัดทางภูมิศาสตร์ต่อไปนี้จะแสดงรหัสสถานที่ของคอมโพเนนต์ที่อยู่ทั้งหมดในพิกัดละติจูด/ลองจิจูดที่ระบุ
// 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
ฟังก์ชันตัวอย่างถัดไปจะแสดงการใช้บริการการระบุพิกัดทางภูมิศาสตร์ โดยเพิ่มข้อจำกัดของคอมโพเนนต์ด้วยการระบุพิกัดทางภูมิศาสตร์แบบย้อนกลับเพื่อนำองค์ประกอบที่อยู่ทั้งหมด ณ ตำแหน่งที่ระบุไว้สำหรับประเภท 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