ใช้ 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 = {
        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 ช่วยให้ผู้ใช้ค้นหาภูมิภาคได้อย่างสะดวก หากต้องการกำหนดค่า วิดเจ็ตการเติมข้อความอัตโนมัติของ 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 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 เพื่อรับ Viewport สำหรับภูมิภาค
  • ใช้การกรองคอมโพเนนต์กับการเรียก Geocoding เพื่อรับรหัสสถานที่สำหรับ เขตการปกครอง 1-4, ท้องถิ่น หรือรหัสไปรษณีย์
  • ใช้การแปลงพิกัดทางภูมิศาสตร์แบบย้อนกลับเพื่อค้นหารหัสสถานที่ตามพิกัดละติจูด/ลองจิจูด หรือ แม้แต่แสดงรหัสสถานที่สำหรับคอมโพเนนต์ทั้งหมดในสถานที่ตั้งหนึ่งๆ

รับวิวพอร์ตสำหรับภูมิภาค

บริการ Geocoding สามารถใช้รหัสสถานที่และแสดงผล Viewport ซึ่งคุณ ส่งไปยังฟังก์ชัน map.fitBounds() เพื่อซูมไปยังรูปหลายเหลี่ยมขอบเขตบนแผนที่ได้ ตัวอย่างต่อไปนี้แสดงการใช้บริการ Geocoding เพื่อรับ Viewport แล้วเรียกใช้ 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 โดยเพิ่มข้อจำกัดของคอมโพเนนต์ด้วย 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
```