Harita üzerinde çizin

Noktalar, çizgiler, alanlar veya nesne koleksiyonlarını belirtmek için haritaya nesneler ekleyebilirsiniz. Maps JavaScript API bu nesne yer paylaşımlarını çağırır. Bindirmeler enlem/boylam koordinatlarına bağlandığından haritayı sürüklediğinizde ya da yakınlaştırdığınızda hareket ederler.

Yer paylaşımı türleri

Maps JavaScript API'deki Fotogerçekçi 3D Haritalar, programatik olarak ekleyebileceğiniz farklı türde yer paylaşımları destekler:

  • Haritadaki çizgiler, çoklu çizgiler kullanılarak görüntülenir. Bu çizgiler, çizgi segmentleriyle bağlanan sıralı bir nokta dizisi olarak temsil edilir.
  • Haritadaki rastgele şekil alanları, poligonlar kullanılarak görüntülenir. Çoklu çizgiler gibi, poligonlar da sıralı bir konum dizisidir. Çoklu çizgilerin aksine, poligonlar içine ettikleri bölgeyi tanımlar.

Çoklu çizgiler

Çoklu çizgiler, çizgileri harita üzerinde sıralı bir konum dizisine göre görüntülemek için kullanılır.

Çoklu çizgi ekleme

Dünyanın yüzeyine çizilen kırmızı çoklu çizgi

<gmp-map-3d center="0,-180,15000000">
  <gmp-polyline-3d altitude-mode="clamp-to-ground" stroke-color="red" stroke-width="10"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    polyline.coordinates = [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ];
  });
</script>

Çoklu çizgiyi kaldırma

const polyline = document.querySelector('gmp-polyline-3d');
polyline.remove();

Kapalı çoklu çizgi

Kapatılan segmentlerin görünürlüğünü draws-occluded-segments özelliğini kullanarak kontrol edebilirsiniz.

San Francisco şehir merkezinden rastgele bir rota çizen kapalı çoklu çizgi

<gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
  <gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="#1967d2" stroke-width="10" stroke-opacity="0.75"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    polyline.coordinates = [
      {lat: 37.80515638571346, lng: -122.4032569467164},
      {lat: 37.80337073509504, lng: -122.4012878349353},
      {lat: 37.79925208843463, lng: -122.3976697250461},
      {lat: 37.7989102378512, lng: -122.3983408725656},
      {lat: 37.79887832784348, lng: -122.3987094864192},
      {lat: 37.79786443410338, lng: -122.4066878788802},
      {lat: 37.79549248916587, lng: -122.4032992702785},
      {lat: 37.78861484290265, lng: -122.4019489189814},
      {lat: 37.78618687561075, lng: -122.398969592545},
      {lat: 37.7892310309145, lng: -122.3951458683092},
      {lat: 37.7916358762409, lng: -122.3981969390652}
    ];
  });
</script>

Örneği Görüntüle

Poligonlar

Poligonlar, harita üzerinde şekilli alanları görüntülemek için kullanılır. Çoklu çizgiler gibi, poligonlar da bir dizi konumdur. Ancak polionlar, bulundukları bölgeyi tanımlar.

Basit poligon

Aşağı Manhattan&#39;ın etrafında mavi kenarlara sahip kırmızı üçgen poligon

<gmp-map-3d center="40.6842,-74.0019,1000" heading="340" tilt="70">
  <gmp-polygon-3d altitude-mode="clamp-to-ground" fill-color="#ff0000" stroke-color="#0000ff" stroke-width="8" draws-occluded-segments></gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208},
      {lat: 40.6993, lng: -74.019},
      {lat: 40.7035, lng: -74.0004},
      {lat: 40.7144, lng: -74.0208}
    ];
  });
</script>

Poligon kaldırma

const polygon = document.querySelector('gmp-polygon-3d');
polygon.remove();

Ekstrüde poligon

Manhattan&#39;ın alt kısmında mavi kenarları olan, 1.000 metre rakıma sahip üçgen kırmızı prizma

<gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
  });
</script>

Örneği Görüntüle

İç deliği olan poligon

Ortasında bir delik ve aşağı Manhattan&#39;ın çevresinde mavi kenarları olan üçgen kırmızı poligon

<gmp-map-3d center="40.7093,-74.0122,10" heading="30" tilt="15" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
    polygon.innerCoordinates = [
      [
        {lat: 40.71, lng: -74.0175, altitude: 1000},
        {lat: 40.703, lng: -74.0165, altitude: 1000},
        {lat: 40.7035, lng: -74.006, altitude: 1000},
        {lat: 40.71, lng: -74.0175, altitude: 1000}
      ]
    ];
  });
</script>