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

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

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

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

ใช้ Places API

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

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

แผนที่ตัวอย่างนี้แสดงการทำคำขอ searchByText เพื่อรับรหัสสถานที่สำหรับ Trinidad, CA จากนั้นใช้รูปแบบกับขอบเขต

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;
        }
    };
}
index.ts

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

index.js

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

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();
index.ts

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();
index.js

ใช้ฟีเจอร์ Place Autocomplete เพื่อค้นหาภูมิภาค

วิดเจ็ต Place Autocomplete เป็นวิธีที่สะดวกในการช่วยให้ผู้ใช้ค้นหาภูมิภาค หากต้องการกําหนดค่าวิดเจ็ตการเติมข้อความอัตโนมัติของสถานที่ให้แสดงเฉพาะภูมิภาค ให้ตั้งค่า 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 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 ช่วยให้คุณแปลงที่อยู่เป็นพิกัดทางภูมิศาสตร์และในทางกลับกันได้ การใช้ต่อไปนี้จะเข้ากันได้ดีกับการจัดสไตล์ตามข้อมูลที่ขับเคลื่อนโดยขอบเขต

  • ใช้การจับคู่พิกัดภูมิศาสตร์เพื่อรับวิวพอร์ตของภูมิภาค
  • ใช้การกรองคอมโพเนนต์กับการเรียกใช้การแปลงพิกัดภูมิศาสตร์เพื่อรับรหัสสถานที่สำหรับเขตบริหาร 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
```