ใช้ 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 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