รับ Maps Demo Key: ทดลองใช้ฟีเจอร์บางอย่างของ Maps JavaScript API และ Places UI Kit โดยไม่มีค่าใช้จ่ายด้วย Maps Demo Key โดยไม่ต้องระบุข้อมูลสำหรับการเรียกเก็บเงิน

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

ใช้ Places API และการจัดรหัสพิกัดภูมิศาสตร์กับการกำหนดสไตล์ตามข้อมูลสำหรับขอบเขต

เลือกแพลตฟอร์ม: Android iOS JavaScript

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)

คุณสามารถใช้ Places API และ Geocoding API ใน Maps JavaScript API เพื่อค้นหาภูมิภาคและดูข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ได้ Geocoding API และ Places API เป็นทางเลือกที่มีประสิทธิภาพและเสถียรสำหรับการรับรหัสสถานที่ หากใช้รหัสสถานที่อยู่แล้ว คุณสามารถนำรหัสดังกล่าวมาใช้ซ้ำกับการจัดรูปแบบตามข้อมูลสำหรับขอบเขตได้อย่างง่ายดาย

เพิ่ม Places และการเข้ารหัสพิกัดภูมิศาสตร์ลงในแอป Maps JavaScript API ด้วยวิธีต่อไปนี้

Places Library, Maps JavaScript API ช่วยให้แอปค้นหาสถานที่ได้ และมีวิดเจ็ตการเติมข้อความอัตโนมัติ
Places API จะแสดงข้อมูลเกี่ยวกับสถานที่โดยใช้คำขอ HTTP
บริการเข้ารหัสพิกัดภูมิศาสตร์และคลาส Geocoder สามารถเข้ารหัสพิกัดภูมิศาสตร์และเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับแบบไดนามิกจากข้อมูลที่ผู้ใช้ป้อน
Geocoding API ช่วยให้คุณเข้ารหัสพิกัดภูมิศาสตร์ของที่อยู่แบบคงที่ที่ทราบได้

ใช้ Places API

ใช้การค้นหาข้อความ (ใหม่) เพื่อค้นหาภูมิภาค

คุณสามารถใช้การค้นหาข้อความ (ใหม่) เพื่อรับรหัสสถานที่ซึ่งมีข้อมูลภูมิภาคโดยใช้ includedType เพื่อระบุประเภทภูมิภาคที่จะแสดงผล การใช้ Text Search (New) API เพื่อขอรหัสสถานที่เท่านั้นจะไม่มีค่าใช้จ่าย ดูข้อมูลเพิ่มเติม

แผนที่ตัวอย่างนี้แสดงการส่งคำขอ searchByText เพื่อรับรหัสสถานที่สำหรับตรินิแดด แคลิฟอร์เนีย จากนั้นใช้สไตล์กับขอบเขต

TypeScript

async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location!);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}index.ts

JavaScript

async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}index.js

ดูซอร์สโค้ดตัวอย่างที่เสร็จสมบูรณ์

TypeScript

let innerMap: google.maps.Map;
let featureLayer: google.maps.FeatureLayer;
let center: google.maps.LatLngLiteral;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    void findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location!);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();index.ts

JavaScript

let innerMap;
let featureLayer;
let center;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    void findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();index.js

ใช้ Place Autocomplete เพื่อค้นหาภูมิภาค

วิดเจ็ต Place Autocompleteช่วยให้ผู้ใช้ค้นหาภูมิภาคได้อย่างสะดวก หากต้องการกำหนดค่าวิดเจ็ต Place Autocomplete ให้แสดงผลเฉพาะภูมิภาค ให้ตั้งค่า includedPrimaryTypes เป็น (regions) ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

// Set up the Autocomplete widget to return only region results.
placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
placeAutocomplete.includedPrimaryTypes = ['(regions)'];

ดูรายละเอียดสถานที่สำหรับภูมิภาค

ข้อมูลรายละเอียดสถานที่สำหรับภูมิภาคหนึ่งๆ อาจมีประโยชน์มาก ตัวอย่างเช่น คุณจะดำเนินการต่อไปนี้ได้

ค้นหารหัสสถานที่ของขอบเขตตามชื่อสถานที่
รับวิวพอร์ตสำหรับการซูมไปยังขอบเขต
ดูประเภทองค์ประกอบของขอบเขต (เช่น locality)
รับที่อยู่ที่มีการจัดรูปแบบ ซึ่งจะแสดงเป็น "ชื่อสถานที่, รัฐ, ประเทศ" ในภูมิภาคสหรัฐอเมริกา (เช่น "Ottumwa, IA, USA")
รับข้อมูลที่เป็นประโยชน์อื่นๆ เช่น รีวิวและรูปภาพจากผู้ใช้

ฟังก์ชันตัวอย่างต่อไปนี้จะค้นหาขอบเขตของตรินิแดด แคลิฟอร์เนีย และจัดแผนที่ให้อยู่ตรงกลางผลลัพธ์

ตัวอย่างต่อไปนี้จะเรียกใช้ฟังก์ชัน fetchFields() เพื่อดูรายละเอียดสถานที่ รวมถึง place.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 data fields you want.
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'viewport', 'types'] });

        // Zoom to the boundary polygon.
        let viewport = place.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)
        });
}

ต่อไปนี้คือการเรียกใช้บริการเว็บการเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับที่เทียบเท่ากัน

```html
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)
        });
}

การเรียกใช้บริการเว็บการเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับที่เทียบเท่ากันมีดังนี้

```html
    https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality
```