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

ใช้การเติมข้อความอัตโนมัติของสถานที่เพื่อค้นหาภูมิภาค

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