Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

รับเส้นทาง

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

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

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

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีรับเส้นทางสำหรับการนำทางด้วยรถยนต์ระหว่าง 2 สถานที่

TypeScript

// Initialize and add the map.
let map;
let mapPolylines: google.maps.Polyline[] = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function initMap(): Promise<void> {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
        google.maps.importLibrary(
            'places'
        ) as Promise<google.maps.PlacesLibrary>,
        //@ts-ignore
        google.maps.importLibrary('routes') as Promise<google.maps.Routes>,
    ]);

    map = new Map(document.getElementById('map') as HTMLElement, {
        zoom: 12,
        center: center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };

    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes, fallbackInfo, geocodingResults } =
        await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => polyline.setMap(map));

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => marker.setMap(map));

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    fitMapToPath(routes[0].path!);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = (await google.maps.importLibrary(
        'core'
    )) as google.maps.CoreLibrary;
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

initMap();index.ts

JavaScript

// Initialize and add the map.
let map;
let mapPolylines = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        //@ts-ignore
        google.maps.importLibrary('routes'),
    ]);
    map = new Map(document.getElementById('map'), {
        zoom: 12,
        center: center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });
    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });
    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };
    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };
    // Call computeRoutes to get the directions.
    const { routes, fallbackInfo, geocodingResults } = await Route.computeRoutes(request);
    // Use createPolylines to create polylines for the route.
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => polyline.setMap(map));
    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => marker.setMap(map));
    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);
    // Fit the map to the path.
    fitMapToPath(routes[0].path);
}
// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = (await google.maps.importLibrary('core'));
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}
initMap();index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
   * Optional: Makes the sample page fill the window.
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}style.css

HTML

<html>
    <head>
        <title>Get directions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
    </body>
</html>index.html

ลองใช้ตัวอย่าง

JSFiddle.net

เรียกใช้เมธอด computeRoutes() เพื่อขอเส้นทางระหว่างสถานที่ 2 แห่ง ตัวอย่างต่อไปนี้แสดงการกำหนดคำขอ และเรียกใช้ computeRoutes() เพื่อรับเส้นทาง

  // Import the Routes library.
  const { Route } = await google.maps.importLibrary('routes');

  // Define a computeRoutes request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
  };

  // Call the computeRoutes() method to get routes.
  const {routes} = await Route.computeRoutes(request);

เลือกช่องที่จะแสดง

เมื่อขอเส้นทาง คุณต้องใช้ Field Mask เพื่อระบุข้อมูลที่การตอบกลับควรแสดง คุณระบุชื่อของพร็อพเพอร์ตี้คลาสเส้นทาง ในฟิลด์มาสก์ได้

การใช้ Field Mask ยังช่วยให้คุณไม่ขอข้อมูลที่ไม่จำเป็น ซึ่งจะช่วยลดเวลาในการตอบสนองและหลีกเลี่ยงการแสดงข้อมูลที่ระบบของคุณไม่ต้องการ

ระบุรายการฟิลด์ที่ต้องการโดยตั้งค่าพร็อพเพอร์ตี้ ComputeRoutesRequest.fields ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

TypeScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};index.ts

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};index.js

ระบุสถานที่สำหรับเส้นทาง

หากต้องการคำนวณเส้นทาง คุณต้องระบุตำแหน่งต้นทางและปลายทางของเส้นทาง รวมถึงมาสก์ฟิลด์เป็นอย่างน้อย นอกจากนี้ คุณยังระบุจุดอ้างอิงกลางตามเส้นทางและใช้จุดอ้างอิงเพื่อทำสิ่งอื่นๆ เช่น เพิ่มจุดแวะพักหรือจุดส่งต่อตามเส้นทางได้ด้วย

ในComputeRoutesRequest คุณระบุสถานที่ตั้งได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้

สถานที่ (แนะนำ)
พิกัดละติจูด/ลองจิจูด
สตริงที่อยู่ ("ชิคาโก รัฐอิลลินอยส์" หรือ "ดาร์วิน นอร์เทิร์นเทร์ริทอรี ออสเตรเลีย")
รหัส Plus

คุณสามารถระบุสถานที่สำหรับจุดแวะพักทั้งหมดในคำขอด้วยวิธีเดียวกัน หรือจะผสมกันก็ได้ เช่น คุณสามารถใช้พิกัดละติจูด/ลองจิจูดสำหรับจุดพักต้นทาง และใช้ออบเจ็กต์สถานที่สำหรับจุดพักปลายทาง

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

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

ระบุสถานที่ตั้งเป็นออบเจ็กต์ Place (แนะนำ)

หากต้องการระบุสถานที่โดยใช้สถานที่ ให้สร้างอินสแตนซ์ Place ใหม่ ข้อมูลโค้ดต่อไปนี้ แสดงการสร้างอินสแตนซ์ Place ใหม่สําหรับ origin และ destination จากนั้นใช้ใน ComputeRoutesRequest

TypeScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};index.ts

JavaScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});
const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});
const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};index.js

พิกัดละติจูด/ลองจิจูด

หากต้องการระบุตำแหน่งเป็นพิกัดละติจูด/ลองจิจูด ให้สร้างอินสแตนซ์ใหม่ของ google.maps.LatLngLiteral, google.maps.LatLngAltitude หรือ google.maps.LatLngAltitudeLiteral ข้อมูลโค้ดต่อไปนี้แสดงการสร้าง อินสแตนซ์ google.maps.LatLngLiteral ใหม่สำหรับ origin และ destination แล้วใช้ใน computeRoutesRequest

TypeScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};index.ts

JavaScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };
// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};index.js

สตริงที่อยู่

สตริงที่อยู่คือที่อยู่ที่แท้จริงซึ่งแสดงด้วยสตริง (เช่น "1600 Amphitheatre Parkway, Mountain View, CA") การเข้ารหัสพิกัดภูมิศาสตร์คือกระบวนการแปลงสตริงที่อยู่เป็น พิกัดละติจูดและลองจิจูด (เช่น ละติจูด 37.423021 และลองจิจูด -122.083739)

เมื่อส่งสตริงที่อยู่เป็นตำแหน่งของจุดอ้างอิง ไลบรารีเส้นทาง จะเข้ารหัสภูมิศาสตร์สตริงภายในเพื่อแปลงเป็นพิกัดละติจูดและลองจิจูด

ข้อมูลโค้ดต่อไปนี้แสดงการสร้าง ComputeRoutesRequest ที่มีสตริงที่อยู่สำหรับ origin และ destination

TypeScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};index.ts

JavaScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};index.js

ตั้งค่าภูมิภาคสำหรับที่อยู่

หากคุณส่งสตริงที่อยู่ที่ไม่สมบูรณ์เป็นตำแหน่งของจุดอ้างอิง API อาจใช้พิกัดละติจูด/ลองจิจูดที่เข้ารหัสพิกัดภูมิศาสตร์ไม่ถูกต้อง ตัวอย่างเช่น คุณส่งคำขอที่ระบุ "Toledo" เป็นต้นทางและ "Madrid" เป็นปลายทางสำหรับเส้นทางการขับขี่

// Define a request with an incomplete address string.
const request = {
  origin: 'Toledo',
  destination: 'Madrid',
};

ในตัวอย่างนี้ ระบบจะตีความ "Toledo" เป็นเมืองในรัฐโอไฮโอของสหรัฐอเมริกา ไม่ใช่ในสเปน ดังนั้น คำขอจะแสดงผลอาร์เรย์ว่าง ซึ่งหมายความว่าไม่มีเส้นทาง

คุณกำหนดค่า API ให้แสดงผลลัพธ์ที่ให้น้ำหนักไปทางภูมิภาคใดภูมิภาคหนึ่งโดยเฉพาะได้โดยใส่พารามิเตอร์ regionCode พารามิเตอร์นี้จะระบุรหัสภูมิภาคเป็นค่าccTLD ("โดเมนระดับบนสุด") แบบ 2 อักขระ รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 โดยมีข้อยกเว้นที่สำคัญบางประการ ตัวอย่างเช่น ccTLD ของสหราชอาณาจักรคือ "uk" (.co.uk) ขณะที่รหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับนิติบุคคล "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ")

คำขอเส้นทางจาก "Toledo" ไปยัง "Madrid" ที่มีพารามิเตอร์ regionCode จะแสดงผลลัพธ์ที่เหมาะสม เนื่องจากระบบตีความ "Toledo" เป็นเมืองในสเปน ดังนี้

const request = {
  origin: 'Toledo',
  destination: 'Madrid',
  region: 'es', // Specify the region code for Spain.
};

Plus Code

หลายคนไม่มีที่อยู่ที่แน่นอน ซึ่งอาจทำให้รับสินค้าที่นำส่งได้ยาก หรือผู้ที่มีที่อยู่อาจต้องการรับสินค้าในสถานที่ที่เฉพาะเจาะจงมากขึ้น เช่น ประตูหลังหรือท่าเทียบเรือ

Plus Codes เป็นเหมือนที่อยู่ของผู้คนหรือสถานที่ซึ่งไม่มีที่อยู่อย่างเป็นทางการ Plus Codes ไม่ใช่ข้อมูลที่อยู่ที่ประกอบด้วยชื่อถนนและบ้านเลขที่ แต่จะเป็นชุดตัวเลขและตัวอักษรที่สร้างขึ้นโดยอิงจากพิกัดละติจูด/ลองจิจูด

Google พัฒนา Plus Code เพื่อให้ทุกคนและทุกสิ่งได้รับประโยชน์จากที่อยู่ โค้ด Plus คือการอ้างอิงตำแหน่งที่เข้ารหัส ซึ่งได้มาจากพิกัดละติจูด/ลองจิจูดที่แสดงถึงพื้นที่ขนาด 1/8000 ขององศาต่อ 1/8000 ขององศา (ประมาณ 14 ม. x 14 ม. ที่เส้นศูนย์สูตร) หรือเล็กกว่า คุณ สามารถใช้ Plus Codes แทนที่อยู่ได้ในสถานที่ที่ไม่มีที่อยู่ หรือ ในกรณีที่ไม่มีการระบุหมายเลขอ้างอิงอาคารหรือไม่มีการตั้งชื่อถนน

Plus Codes ต้องจัดรูปแบบเป็นรหัสสากลหรือรหัสผสม ดังนี้

รหัสสากลประกอบด้วยรหัสพื้นที่ 4 หลักและรหัสท้องถิ่น 6 หลักขึ้นไป เช่น สำหรับที่อยู่ "1600 Amphitheatre Parkway, Mountain View, CA" รหัส สากลคือ "849V" และรหัสท้องถิ่นคือ "CWC8+R9" จากนั้นใช้โค้ด Plus ทั้ง 10 อักขระ เพื่อระบุค่าสถานที่ตั้งเป็น "849VCWC8+R9"
รหัสผสมประกอบด้วยรหัสท้องถิ่น 6 หลักขึ้นไปที่รวมกับตำแหน่งที่ชัดเจน เช่น ที่อยู่ "450 Serra Mall, Stanford, CA 94305, USA" มี รหัสท้องถิ่นเป็น "CRHJ+C3" สำหรับที่อยู่ที่ซับซ้อน ให้รวมรหัสท้องถิ่นกับส่วนเมือง รัฐ รหัสไปรษณีย์ และประเทศของที่อยู่ในรูปแบบ "CRHJ+C3 Stanford, CA 94305, USA"

ข้อมูลโค้ดต่อไปนี้แสดงการคำนวณเส้นทางโดยการระบุจุดอ้างอิงสำหรับต้นทางของเส้นทาง และปลายทางโดยใช้ Plus Codes

TypeScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};index.ts

JavaScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};index.js