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

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

شکل‌ها و خط‌ها

انتخاب پلاتفرم: Android iOS JavaScript

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

چندخطی‌ها

برای رسم خط در نقشه، از چندخطی استفاده کنید. کلاس Polyline یک رونهاد خطی از بخش‌های خط متصل‌شده روی نقشه را تعریف می‌کند. شیء Polyline از آرایه‌ای از مکان‌های LatLng تشکیل شده است و مجموعه‌ای از پاره‌خط‌ها را ایجاد می‌کند که این مکان‌ها را در یک توالی مرتب به هم متصل می‌کند.

افزودن چندخطی

سازنده Polyline مجموعه‌ای از PolylineOptions را می‌گیرد که مختصات LatLng خط و مجموعه‌ای از سبک‌ها را برای تنظیم رفتار دیداری چندخطی مشخص می‌کند.

‫Polyline شیء به‌صورت مجموعه‌ای از بخش‌های مستقیم روی نقشه رسم شده است. می‌توانید رنگ‌ها، وزن‌ها، و کدری‌های سفارشی را برای ضربه خط درون PolylineOptions هنگام ساختن خط مشخص کنید، یا می‌توانید آن ویژگی‌ها را پس‌از ساختن تغییر دهید. چندخط از سبک‌های ضربه زیر پشتیبانی می‌کند:

strokeColor رنگ HTML شانزده‌شانزدهی را با قالب "#FFFFFF" مشخص می‌کند. کلاس Polyline از رنگ‌های نام‌گذاری‌شده پشتیبانی نمی‌کند.
‫strokeOpacity مقدار عددی بین 0.0 و 1.0 را برای تعیین میزان شفافیت رنگ خط مشخص می‌کند. پیش‌فرض 1.0 است.
‫strokeWeight عرض خط را به پیکسل مشخص می‌کند.

ویژگی editable چندخطی مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا نه. شکل‌های قابل‌ویرایش توسط کاربر را در زیر ببینید. به‌همین ترتیب، می‌توانید دارایی draggable را تنظیم کنید تا به کاربران اجازه دهید خط را بکشند.

این مثال یک چندخطی قرمز دو پیکسلی ایجاد می‌کند که مسیر اولین پرواز فرااقیانوسی بین اوکلند، کالیفرنیا، و بریزبن، استرالیا را نشان می‌دهد.

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    const flightPlanCoordinates = [
        { lat: 37.772, lng: -122.214 },
        { lat: 21.291, lng: -157.821 },
        { lat: -18.142, lng: 178.431 },
        { lat: -27.467, lng: 153.027 },
    ];
    const flightPath = new Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();index.ts

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    const flightPlanCoordinates = [
        { lat: 37.772, lng: -122.214 },
        { lat: 21.291, lng: -157.821 },
        { lat: -18.142, lng: 178.431 },
        { lat: -27.467, lng: 153.027 },
    ];
    const flightPath = new Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();index.js

مشاهده مثال

برداشتن چندضلعی

برای برداشتن چندخطی از نقشه، روش setMap() را با ارسال null به‌عنوان آرگومان فراخوانی کنید. در مثال زیر، flightPath یک شیء چندخطی است:

flightPath.setMap(null);

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

بازرسی چندخطی

چندخطی مجموعه‌ای از مختصات را به‌عنوان آرایه‌ای از LatLng اشیا مشخص می‌کند. این مختصات مسیر خط را تعیین می‌کند. برای بازیابی مختصات، با getPath() تماس بگیرید که آرایه‌ای از نوع MVCArray برمی‌گرداند. می‌توانید بااستفاده از عملیات زیر، آرایه را دستکاری و بازرسی کنید:

‫getAt() مقدار LatLng را در نمایه مبنای صفر برمی‌گرداند.
‫insertAt() یک LatLng گذرانده‌شده را در مقدار نمایه مبتنی بر صفر معینی درج می‌کند. توجه داشته باشید که هرگونه مختصات موجود در آن مقدار شاخص به جلو منتقل می‌شود.
‫removeAt() یک LatLng را در مقدار نمایه مبتنی بر صفر معینی برمی‌دارد.

توجه: نمی‌توانید عنصر iام آرایه را بااستفاده از دستورگان mvcArray[i] بازیابی کنید. باید از mvcArray.getAt(i) استفاده کنید.

مثال زیر ساختن چندخطی براساس کلیک‌ها را نشان می‌دهد (برای افزودن رأس، روی نقشه کلیک کنید).

TypeScript

/**
 * This example creates an interactive map which constructs a polyline based on
 * user clicks. Note that the polyline only appears once its path property
 * contains two LatLng coordinates.
 */

let poly: google.maps.Polyline;
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event: google.maps.MapMouseEvent) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(latLng);

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();index.ts

JavaScript

/**
 * This example creates an interactive map which constructs a polyline based on
 * user clicks. Note that the polyline only appears once its path property
 * contains two LatLng coordinates.
 */

let poly;
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(latLng);

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();index.js

مشاهده مثال

سفارشی‌سازی چندضلعی

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

چندضلعی‌ها

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

‫Polygon شیء می‌تواند شکل‌های پیچیده را توصیف کند، ازجمله:

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

برای تعریف کردن شکل پیچیده، از چندضلعی با مسیرهای متعدد استفاده می‌کنید.

توجه: «لایه داده» روشی ساده برای کشیدن چندضلعی‌ها ارائه می‌دهد. این کار برای شما پیچیدگی چندضلعی را مدیریت می‌کند و رسم چندضلعی‌های دارای حفره را آسان‌تر می‌کند. به مستندات «لایه داده» مراجعه کنید.

افزودن چندضلعی

ازآنجایی‌که ناحیه چندضلعی ممکن است شامل چندین مسیر جداگانه باشد، خصوصیت paths شیء Polygon آرایه‌ای از آرایه‌ها را مشخص می‌کند که هرکدام از نوع MVCArray هستند. هر آرایه یک توالی جداگانه از مختصات LatLng مرتب را تعریف می‌کند.

برای چندضلعی‌های ساده که فقط از یک مسیر تشکیل شده‌اند، می‌توانید بااستفاده از آرایه تکی از مختصات LatLng، یک Polygon بسازید. «میانای برنامه‌سازی کاربردی جاوا اسکریپت در Maps» آرایه ساده را هنگام ساختن آن و ذخیره کردن آن در دارایی paths به آرایه‌ای از آرایه‌ها تبدیل می‌کند. این API روشی ساده getPath() برای چندضلعی‌های متشکل از یک مسیر ارائه می‌دهد.

توجه: اگر چندضلعی ساده‌ای را به این روش بسازید، همچنان باید با دستکاری مسیر به‌عنوان MVCArray، مقادیر را از چندضلعی بازیابی کنید.

دارایی editable چندضلعی مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا نه. شکل‌های قابل ویرایش توسط کاربر را در زیر ببینید. به‌همین ترتیب، می‌توانید دارایی draggable را تنظیم کنید تا به کاربران اجازه دهید شکل را بکشند.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;index.js

مشاهده مثال

تکمیل خودکار چندضلعی

‫Polygon در مثال بالا از چهار مجموعه LatLng مختصات تشکیل شده است، اما توجه داشته باشید که مجموعه اول و آخر مکان یکسانی را تعریف می‌کنند که حلقه را کامل می‌کند. بااین‌حال، در عمل، ازآنجایی‌که چندضلعی‌ها مناطق بسته را تعریف می‌کنند، نیازی نیست آخرین مجموعه مختصات را مشخص کنید. «میانای برنامه‌سازی کاربردی JavaScript در Maps» به‌طور خودکار چندضلعی را با رسم خطی که آخرین مکان را به اولین مکان متصل می‌کند برای هر مسیر معینی تکمیل می‌کند.

مثال زیر با مثال قبلی یکسان است، با این تفاوت که آخرین LatLng حذف شده است: مشاهده مثال.

برداشتن چندضلعی

برای برداشتن چندضلعی از نقشه، روش setMap() را با ارسال null به‌عنوان آرگومان فراخوانی کنید. در مثال زیر، bermudaTriangle یک شیء چندضلعی است:

bermudaTriangle.setMap(null);

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

بازرسی کردن چندضلعی

چندضلعی مجموعه مختصات خود را به‌صورت آرایه‌ای از آرایه‌ها مشخص می‌کند، که هر آرایه از نوع MVCArray است. هر آرایه «برگ» آرایه‌ای از LatLng مختصات است که مسیر واحدی را مشخص می‌کند. برای بازیابی این مختصات، متد getPaths() شیء Polygon را فراخوانی کنید. ازآنجایی‌که آرایه یک MVCArray است، باید آن را بااستفاده از عملیات زیر دستکاری و بازرسی کنید:

‫getAt() مقدار LatLng را در نمایه مبنای صفر برمی‌گرداند.
‫insertAt() یک LatLng گذرانده‌شده را در مقدار نمایه مبتنی بر صفر معینی درج می‌کند. توجه داشته باشید که هرگونه مختصات موجود در آن مقدار شاخص به جلو منتقل می‌شود.
‫removeAt() مقدار نمایه مبتنی بر صفر LatLng را در موقعیت داده‌شده برمی‌دارد.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;index.js

مشاهده مثال

ایجاد سوراخ در چندضلعی

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

توجه: «لایه داده» ترتیب مسیرهای داخلی و خارجی را برای شما مدیریت می‌کند و رسم چندضلعی‌های دارای حفره را آسان‌تر می‌کند. مستندات لایه داده را ببینید.

مثال زیر چندضلعی‌ای را با دو مسیر رسم می‌کند که مسیر داخلی در جهت مخالف مسیر بیرونی پیچیده شده است.

TypeScript

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;index.js

مشاهده مثال

مستطیل‌ها

علاوه‌بر کلاس عمومی Polygon، ‫Google Maps JavaScript API شامل کلاس خاصی برای Rectangle اشیا است تا ساخت آن‌ها را ساده‌تر کند.

افزودن مستطیل

Rectangle شبیه به Polygon در است که می‌توانید رنگ‌های سفارشی، وزن‌ها، و کدری‌های لبه مستطیل (خط) و رنگ‌های سفارشی و کدری‌های ناحیه داخل مستطیل (داخل) را تعریف کنید. رنگ‌ها باید در سبک HTML عددی شانزده‌تایی نشان داده شوند.

برخلاف Polygon، paths را برای Rectangle تعریف نمی‌کنید. درعوض، مستطیل دارای ویژگی bounds است که شکل آن را با مشخص کردن google.maps.LatLngBounds برای مستطیل تعریف می‌کند.

دارایی editable مستطیل مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا نه. شکل‌های قابل‌ویرایش توسط کاربر را در زیر ببینید. به‌همین ترتیب، می‌توانید دارایی draggable را تنظیم کنید تا به کاربران اجازه دهید مستطیل را بکشند.

TypeScript

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;index.js

مشاهده مثال

کد زیر هر بار که کاربر بزرگ‌نمایی نقشه را تغییر می‌دهد، مستطیلی ایجاد می‌کند. اندازه مستطیل براساس ناحیه نمایش تعیین می‌شود.

TypeScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;index.js

مشاهده مثال

برداشتن مستطیل

برای برداشتن مستطیل از نقشه، متد setMap() را با ارسال null به‌عنوان آرگومان فراخوانی کنید.

rectangle.setMap(null);

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

حلقه

علاوه‌بر کلاس عمومی Polygon، Google Maps JavaScript API شامل کلاس خاصی برای Circle اشیا است تا ساخت آن‌ها را ساده‌تر کند.

افزودن حلقه

Circle شبیه به Polygon است، به این معنی که می‌توانید رنگ‌های سفارشی، وزن‌ها، و کدری‌های لبه دایره (خط دور) و رنگ‌های سفارشی و کدری‌های ناحیه داخل دایره (رنگ داخل) را تعریف کنید. رنگ‌ها باید در سبک HTML عددی شانزده‌تایی مشخص شوند.

برخلاف Polygon، paths را برای Circle تعریف نمی‌کنید. درعوض، دایره دو ویژگی اضافی دارد که شکل آن را تعریف می‌کنند:

center مختصات google.maps.LatLng مرکز دایره را مشخص می‌کند.
‫radius شعاع دایره را برحسب متر مشخص می‌کند.

دارایی editable دایره مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا نه. شکل‌های قابل ویرایش توسط کاربر را در زیر ببینید. به‌همین ترتیب، می‌توانید ویژگی draggable را تنظیم کنید تا به کاربران اجازه دهید دایره را بکشند.

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the buttons.
    const buttons = document.querySelectorAll('input[name="radius"]');

    // Create the circle.
    const walkingCircle = new Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (changeEvent) => {
            const target = changeEvent.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener(
        'click',
        (
            mapsMouseEvent:
                google.maps.MapMouseEvent | google.maps.IconMouseEvent
        ) => {
            const newCenter = mapsMouseEvent.latLng;
            if (!newCenter) return;
            walkingCircle.setCenter(newCenter);
            centerMarker.position = newCenter;
            innerMap.panTo(newCenter);
        }
    );

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the buttons.
    const buttons = document.querySelectorAll('input[name="radius"]');

    // Create the circle.
    const walkingCircle = new Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (changeEvent) => {
            const target = changeEvent.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        if (!newCenter) return;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

void init();index.js

CSS

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

#control-panel {
    display: none; /* Set to 'display: block' after the map loads. */
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-family: 'Roboto', sans-serif;
    font-size: medium;
    margin: 10px;
    padding: 10px;
}style.css

HTML

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>index.html

مشاهده مثال

برداشتن حلقه

برای برداشتن دایره از نقشه، روش setMap() را با ارسال null به‌عنوان آرگومان فراخوانی کنید.

circle.setMap(null);

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

شکل‌های قابل ویرایش و کشیدنی توسط کاربر

با قابل‌ویرایش کردن شکل، دستگیره‌هایی به شکل اضافه می‌شود که افراد می‌توانند از آن‌ها برای تغییر موقعیت، تغییر شکل، و تغییر اندازه شکل مستقیماً روی نقشه استفاده کنند. همچنین می‌توانید شکل را قابل‌کشیدن کنید تا افراد بتوانند آن را به مکان دیگری در نقشه منتقل کنند.

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

قابل‌ویرایش کردن شکل

با تنظیم editable روی true در گزینه‌های شکل، هر شکلی (چندخطی، چندضلعی، دایره، و مستطیل) می‌تواند به‌صورت قابل‌ویرایش توسط کاربر تنظیم شود.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

مشاهده مثال

کشیدنی کردن شکل

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

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

وقتی کشیدن را روی چندضلعی یا چندخطی فعال می‌کنید، باید با تنظیم کردن ویژگی geodesic آن روی true، چندضلعی یا چندخطی را زمین‌واره‌ای کنید.

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

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

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

نقشه زیر دو مثلث را با اندازه و ابعاد تقریباً یکسان نشان می‌دهد. خصوصیت geodesic مثلث قرمز روی true تنظیم شده است. توجه کنید که با حرکت به سمت شمال، شکل آن چگونه تغییر می‌کند.

مشاهده مثال

گوش دادن به رویدادهای ویرایش

وقتی شکلی ویرایش می‌شود، رویدادی پس‌از تکمیل ویرایش فعال می‌شود. این رویدادها در زیر فهرست شده‌اند.

شکل‌ها	رویدادها
دایره	`radius_changed` `center_changed`
چندضلعی	`insert_at` `remove_at` `set_at` شنونده باید روی مسیر چندضلعی تنظیم شود. اگر چندضلعی چند مسیر داشته باشد، باید شنونده‌ای برای هر مسیر تنظیم شود.
چندخطی	`insert_at` `remove_at` `set_at` شنونده باید در مسیر چندخطی تنظیم شود.
مستطیل	`bounds_changed`

چند تکه‌کد مفید:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

نمونه‌ای از مدیریت رویداد ویرایش در مستطیل را ببینید: دیدن نمونه.

گوش دادن به رویدادهای کشیدن

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

رویداد	شرح
`dragstart`	وقتی کاربر شروع به کشیدن شکل می‌کند، این رویداد راه‌اندازی می‌شود.
`drag`	وقتی کاربر شکل را می‌کشد، مکرراً راه‌اندازی می‌شود.
`dragend`	وقتی کاربر کشیدن شکل را متوقف می‌کند، این رویداد راه‌اندازی می‌شود.

برای اطلاعات بیشتر درباره مدیریت رویدادها، به مستندات رویدادها مراجعه کنید.

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

چندخطی‌ها

افزودن چندخطی

TypeScript

JavaScript

برداشتن چندضلعی

بازرسی چندخطی

TypeScript

JavaScript

سفارشی‌سازی چندضلعی

چندضلعی‌ها

افزودن چندضلعی

TypeScript

JavaScript

تکمیل خودکار چندضلعی

برداشتن چندضلعی

بازرسی کردن چندضلعی

TypeScript

JavaScript

ایجاد سوراخ در چندضلعی

TypeScript

JavaScript

مستطیل‌ها

افزودن مستطیل

TypeScript

JavaScript

TypeScript

JavaScript

برداشتن مستطیل

حلقه

افزودن حلقه

TypeScript

JavaScript

CSS

HTML

برداشتن حلقه

شکل‌های قابل ویرایش و کشیدنی توسط کاربر

قابل‌ویرایش کردن شکل

کشیدنی کردن شکل

گوش دادن به رویدادهای ویرایش

گوش دادن به رویدادهای کشیدن

شکل‌ها و خط‌ها