Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک مسیر دریافت کنید

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

یک مسیر، مسیری قابل پیمایش بین یک نقطه شروع یا مبدا و یک نقطه پایان یا مقصد است. می‌توانید مسیری را برای حالت‌های مختلف حمل و نقل، مانند پیاده‌روی، دوچرخه‌سواری یا انواع مختلف وسایل نقلیه، انتخاب کنید. همچنین می‌توانید جزئیات مسیر مانند مسافت، زمان تخمینی برای پیمایش مسیر، عوارض مورد انتظار و دستورالعمل‌های گام به گام برای پیمایش مسیر را درخواست کنید.

کد منبع کامل مثال را ببینید

نمونه کد زیر نحوه دریافت مسیر برای مسیرهای رانندگی بین دو مکان را نشان می‌دهد.

تایپ اسکریپت

// 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.422000, 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

جاوا اسکریپت

// 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.422000, 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

سی‌اس‌اس

/*
 * 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>
  <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() را فراخوانی کنید. مثال زیر تعریف یک درخواست و سپس فراخوانی 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);

فیلدهایی را برای بازگشت انتخاب کنید

وقتی مسیری را درخواست می‌کنید، باید از یک ماسک فیلد برای مشخص کردن اطلاعاتی که پاسخ باید برگرداند استفاده کنید. می‌توانید نام ویژگی‌های کلاس Route را در ماسک فیلد مشخص کنید.

استفاده از ماسک فیلد همچنین تضمین می‌کند که شما داده‌های غیرضروری درخواست نمی‌کنید، که به نوبه خود به کاهش تأخیر پاسخ کمک می‌کند و از بازگشت اطلاعاتی که سیستم شما به آنها نیاز ندارد، جلوگیری می‌کند.

لیست فیلدهای مورد نیاز خود را با تنظیم ویژگی ComputeRoutesRequest.fields ، همانطور که در قطعه کد زیر نشان داده شده است، مشخص کنید:

تایپ اسکریپت

// 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

جاوا اسکریپت

// 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 ، می‌توانید یک مکان را به هر یک از روش‌های زیر مشخص کنید:

مکان (ترجیحاً)
مختصات طول/عرض جغرافیایی
رشته آدرس ("شیکاگو، ایلینوی" یا "داروین، ان‌تی، استرالیا")
کد پلاس

شما می‌توانید مکان‌ها را برای همه نقاط مسیر در یک درخواست به یک روش مشخص کنید، یا می‌توانید آنها را با هم ترکیب کنید. برای مثال، می‌توانید از مختصات عرض/طول جغرافیایی برای نقطه مسیر مبدا و از یک شیء Place برای نقطه مسیر مقصد استفاده کنید.

برای کارایی و دقت، از اشیاء مکان به جای مختصات طول/عرض جغرافیایی یا رشته‌های آدرس استفاده کنید. شناسه‌های مکان منحصراً صریح هستند و مزایای کدگذاری جغرافیایی را برای مسیریابی مانند نقاط دسترسی و متغیرهای ترافیک ارائه می‌دهند. آنها به جلوگیری از موقعیت‌های زیر که می‌توانند از روش‌های دیگر مشخص کردن مکان ناشی شوند، کمک می‌کنند:

استفاده از مختصات طول و عرض جغرافیایی می‌تواند منجر به نمایش مکان در نزدیکترین جاده به آن مختصات شود - که ممکن است نقطه دسترسی به ملک یا حتی جاده‌ای که به سرعت یا با خیال راحت به مقصد منتهی می‌شود، نباشد.
رشته‌های آدرس ابتدا باید توسط API مسیرها (Routes API) کدگذاری جغرافیایی شوند تا قبل از اینکه بتوانند مسیری را محاسبه کنند، به مختصات عرض/طول جغرافیایی تبدیل شوند. این تبدیل می‌تواند بر عملکرد تأثیر بگذارد.

یک مکان را به عنوان یک شیء Place مشخص کنید (ترجیحاً)

برای مشخص کردن یک مکان با استفاده از Place، یک نمونه Place جدید ایجاد کنید. قطعه کد زیر ایجاد نمونه های Place جدید برای origin و destination و سپس استفاده از آنها در ComputeRoutesRequest را نشان می دهد:

تایپ اسکریپت

// 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

جاوا اسکریپت

// 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 را نشان می‌دهد:

تایپ اسکریپت

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = {lat: 37.422000, 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

جاوا اسکریپت

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422000, 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).

وقتی یک رشته آدرس را به عنوان مکان یک نقطه مسیر ارسال می‌کنید، کتابخانه مسیرها (Routes) به صورت داخلی رشته را ژئوکد می‌کند تا آن را به مختصات طول و عرض جغرافیایی تبدیل کند.

قطعه کد زیر ایجاد یک ComputeRoutesRequest را با یک رشته آدرس برای origin و destination نشان می‌دهد:

تایپ اسکریپت

// 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

جاوا اسکریپت

// 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 ممکن است از مختصات جغرافیایی طول/عرض جغرافیایی نادرست استفاده کند. برای مثال، شما درخواستی ارسال می‌کنید که "تولدو" را به عنوان مبدا و "مادرید" را به عنوان مقصد برای یک مسیر رانندگی مشخص می‌کند:

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

در این مثال، "تولدو" به عنوان شهری در ایالت اوهایو در ایالات متحده تفسیر می‌شود، نه در اسپانیا. بنابراین، درخواست یک آرایه خالی را برمی‌گرداند، به این معنی که هیچ مسیری وجود ندارد.

شما می‌توانید با وارد کردن پارامتر regionCode، API را طوری پیکربندی کنید که نتایج را با توجه به یک منطقه خاص برگرداند. این پارامتر، کد منطقه را به عنوان یک مقدار دو کاراکتری ccTLD ("دامنه سطح بالا") مشخص می‌کند. اکثر کدهای ccTLD با کدهای ISO 3166-1 یکسان هستند، البته با برخی استثنائات قابل توجه. به عنوان مثال، ccTLD بریتانیا "uk" (.co.uk) است در حالی که کد ISO 3166-1 آن "gb" است (از نظر فنی برای موجودیت "بریتانیای کبیر و ایرلند شمالی").

یک درخواست مسیر برای "تولدو" به "مادرید" که شامل پارامتر regionCode است، نتایج مناسبی را برمی‌گرداند زیرا "تولدو" به عنوان شهری در اسپانیا تفسیر می‌شود:

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

کد پلاس

بسیاری از افراد آدرس دقیقی ندارند که می‌تواند دریافت مرسولات را برایشان دشوار کند. یا افرادی که آدرس دارند ممکن است ترجیح دهند مرسولات را در مکان‌های خاص‌تری مانند ورودی پشتی یا اسکله بارگیری بپذیرند.

کدهای پلاس مانند آدرس خیابان برای افراد یا مکان‌هایی هستند که آدرس واقعی ندارند. به جای آدرس‌هایی با نام و شماره خیابان، کدهای پلاس بر اساس مختصات عرض/طول جغرافیایی هستند و به صورت عدد و حروف نمایش داده می‌شوند.

گوگل پلاس کدها را توسعه داده است تا مزایای آدرس‌ها را برای همه و همه چیز فراهم کند. پلاس کد یک مرجع مکانی کدگذاری شده است که از مختصات عرض/طول جغرافیایی گرفته شده و نشان‌دهنده یک منطقه است: ۱/۸۰۰۰ درجه در ۱/۸۰۰۰ درجه (حدود ۱۴ متر در ۱۴ متر در خط استوا) یا کوچکتر. می‌توانید از پلاس کدها به عنوان جایگزینی برای آدرس خیابان‌ها در مکان‌هایی که آدرس خیابان وجود ندارد یا ساختمان‌ها شماره‌گذاری نشده‌اند یا خیابان‌ها نامگذاری نشده‌اند، استفاده کنید.

کدهای پلاس باید به صورت یک کد سراسری یا یک کد مرکب قالب‌بندی شوند:

کد جهانی از یک کد منطقه ۴ کاراکتری و یک کد محلی ۶ کاراکتری یا بیشتر تشکیل شده است. برای مثال، برای آدرس "۱۶۰۰ Amphitheatre Parkway, Mountain View, CA"، کد جهانی "۸۴۹V" و کد محلی "CWC8+R9" است. سپس شما از کل کد پلاس ۱۰ کاراکتری برای مشخص کردن مقدار مکان به صورت "۸۴۹VCWC8+R9" استفاده می‌کنید.
کد مرکب از یک کد محلی ۶ کاراکتری یا بیشتر تشکیل شده است که با یک مکان صریح ترکیب شده است. برای مثال، آدرس "۴۵۰ Serra Mall, Stanford, CA 94305, USA" دارای کد محلی "CRHJ+C3" است. برای یک آدرس مرکب، کد محلی را با بخش شهر، ایالت، کد پستی و کشور آدرس به شکل "CRHJ+C3 Stanford, CA 94305, USA" ترکیب کنید.

قطعه کد زیر محاسبه یک مسیر را با مشخص کردن یک نقطه مسیر برای مبدا و مقصد با استفاده از کدهای پلاس نشان می‌دهد:

تایپ اسکریپت

// 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

جاوا اسکریپت

// 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

یک مسیر دریافت کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

کد منبع کامل مثال را ببینید

تایپ اسکریپت

جاوا اسکریپت

سی‌اس‌اس

اچ‌تی‌ام‌ال

نمونه را امتحان کنید

فیلدهایی را برای بازگشت انتخاب کنید

تایپ اسکریپت

جاوا اسکریپت

مکان‌های یک مسیر را مشخص کنید

یک مکان را به عنوان یک شیء Place مشخص کنید (ترجیحاً)

تایپ اسکریپت

جاوا اسکریپت

مختصات طول/عرض جغرافیایی

تایپ اسکریپت

جاوا اسکریپت

رشته آدرس

تایپ اسکریپت

جاوا اسکریپت

منطقه را برای آدرس تنظیم کنید

کد پلاس

تایپ اسکریپت

جاوا اسکریپت

یک مسیر دریافت کنید