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

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

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

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

เพิ่ม Places และ Geocoding ลงในแอป Maps JavaScript API ได้ด้วยวิธีต่อไปนี้

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

ใช้ Places API

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

คุณสามารถใช้ การค้นหาข้อความ (ใหม่) เพื่อรับ รหัสสถานที่ที่มีข้อมูลภูมิภาคได้โดยใช้ includedType เพื่อระบุ ประเภท ภูมิภาค ที่จะแสดง การใช้ Text Search (ใหม่) 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;
    };
}

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;
    };
}

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

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();

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();

ใช้ Places 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.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 data fields you want.
        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 ช่วยให้คุณ แปลงที่อยู่เป็นพิกัดทางภูมิศาสตร์ และแปลงพิกัดทางภูมิศาสตร์เป็นที่อยู่ได้ การใช้งานต่อไปนี้จะทำงานร่วมกับการจัดรูปแบบตามข้อมูลสำหรับขอบเขตได้ดี

  • ใช้ Geocoding เพื่อรับวิวพอร์ตสำหรับภูมิภาค
  • ใช้การกรองคอมโพเนนต์กับการเรียก Geocoding เพื่อรับรหัสสถานที่สำหรับพื้นที่การปกครองระดับ 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)
        });
}

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

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

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

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