Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Pustaka Geometri

  1. Ringkasan
  2. Konsep Geometri Sferikal
    1. Fungsi Jarak dan Luas
    2. Fungsi Navigasi
  3. Pengkodean Geometri
  4. Fungsi Poligon dan Polyline
    1. containsLocation()
    2. isLocationOnEdge()

Ringkasan

Konsep-konsep dalam dokumen ini mengacu pada fitur yang tersedia dalam pustaka google.maps.geometry. Pustaka ini tidak dimuat secara default saat Anda memuat Maps JavaScript API melainkan harus secara eksplisit ditetapkan melalui penggunaan parameter bootstrap libraries.

Lihat Ringkasan Pustaka untuk informasi selengkapnya.

Pustaka geometri Google Maps JavaScript API menyediakan berbagai fungsi utilitas untuk perhitungan data geometris pada permukaan bumi. Pustaka ini berisi tiga namespace:

  • spherical berisi utilitas geometri sferikal yang memungkinkan Anda menghitung sudut, jarak, dan luas dari garis lintang dan garis bujur.
  • encoding berisi utilitas untuk enkode dan dekode jalur polyline sesuai dengan Algoritme Polyline yang Dienkode.
  • poly berisi fungsi utilitas untuk perhitungan yang melibatkan poligon dan polyline.

Pustaka google.maps.geometry tidak berisi kelas apa pun; sebaliknya, pustakanya berisi metode statis untuk namespace di atas.

Konsep Geometri Sferikal

Gambar dalam Google Maps JavaScript API adalah dua dimensi dan "datar". Akan tetapi, Bumi adalah objek tiga dimensi, dan sering kali dianggap benda bulat yang datar pada kutubnya atau sekadar bola dunia. Dalam Maps API kami menggunakan bola dunia, dan untuk menampilkan Bumi pada permukaan datar dua dimensi - seperti layar komputer Anda - Maps API menggunakan proyeksi.

Dalam proyeksi 2D, penampilan kadang-kadang bisa menipu. Karena proyeksi peta memerlukan beberapa distorsi, geometri Euclides sederhana sering kali tidak berlaku. Misalnya, jarak terpendek antara dua titik pada bola dunia bukanlah garis lurus, melainkan lingkaran besar (tipe geodesi), dan sudut yang membentuk segi tiga pada permukaan bola dunia menambahkan hingga lebih dari 180 derajat .

Karena perbedaan ini, fungsi geometris pada bola dunia (atau pada proyeksinya) mengharuskan penggunaan Geometri Sferikal untuk menghitung bangun seperti jarak, arah tujuan, dan luas. Utilitas untuk menghitung bangun geometris sferikal ini dimuat dalam namespace google.maps.geometry.spherical Maps API. Namespace ini menyediakan metode statis untuk menghitung nilai-nilai skalar dari koordinat sferikal (garis lintang dan garis bujur).

Fungsi Jarak dan Luas

Jarak antara dua titik adalah panjang dari jalur terpendek di antara keduanya. Jalur terpendek ini disebut geodesi. Pada bola dunia, semua geodesi adalah segmen dari sebuah lingkaran besar. Untuk menghitung jarak ini, panggil computeDistanceBetween(), dengan meneruskan dua objek LatLng.

Sebagai gantinya Anda bisa menggunakan computeLength() untuk menghitung panjang jalur yang diberikan jika Anda memiliki beberapa lokasi.

Hasil jarak dinyatakan dalam meter.

Untuk menghitung luas (dalam meter persegi) dari bidang poligonal, panggil computeArea(), dengan meneruskan larik objek LatLng yang mendefinisikan sebuah loop tertutup.

Saat bergerak pada bola dunia, arah tujuan adalah sudut arah dari titik acuan tetap, biasanya adalah utara sebenarnya. Dalam Google Maps API, arah tujuan didefinisikan dalam derajat dari utara sebenarnya, dalam hal ini arah tujuan diukur searah jarum jam dari utara sebenarnya (0 derajat). Anda bisa menghitung arah tujuan ini di antara kedua lokasi dengan metode computeHeading(), dengan meneruskan dua kedua from dan to dari objek LatLng.

Dengan memberikan arah tujuan tertentu, lokasi asal, dan jarak yang akan ditempuh (dalam meter), Anda bisa menghitung koordinat tujuan dengan menggunakan computeOffset().

Dengan kedua objek LatLng dan nilai antara 0 dan 1, Anda juga bisa menghitung tujuan di antara keduanya dengan menggunakan metode interpolate(), yang melakukan interpolasi linier sferikal di antara dua lokasi, yang nilainya menunjukkan jarak pecahan yang akan ditempuh sepanjang jalur dari tempat asal ke tujuan.

Contoh berikut membuat dua polyline bila Anda mengeklik dua titik pada peta - satu geodesi dan satu garis "lurus" yang menghubungkan kedua lokasi - serta menghitung arah tujuan untuk perjalanan di antara kedua titik tersebut:

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}
<div id="map"></div>
<div id="floating-panel">
  Origin: <input type="text" readonly id="origin">
  Destination: <input type="text" readonly id="destination"><br>
  Heading: <input type="text" readonly id="heading"> degrees
</div>
/* 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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}

Tampilkan contoh (geometry-headings.html)

Metode Pengkodean

Jalur dalam Google Maps JavaScript API sering kali ditetapkan sebagai Array objek LatLng. Akan tetapi, meneruskan larik seperti itu sering kali memakan tempat. Sebagai gantinya Anda bisa menggunakan algoritme pengkodean polyline dari Google untuk memadatkan jalur yang diberikan, yang nanti bisa dapat Anda mekarkan melalui decoding.

Pustaka geometry berisi namespace encoding bagi utilitas untuk mengenkode polyline dan membaca kodenya.

Metode statis encodePath() mengenkodekan jalur yang diberikan. Anda bisa meneruskan larik LatLng maupun MVCArray (yang dikembalikan oleh Polyline.getPath()).

Untuk membaca jalur yang dienkode, cukup panggil decodePath() dengan meneruskan metode string yang dienkode.

Contoh berikut menampilkan peta Oxford, Mississippi. Mengeklik pada peta akan menambahkan titik ke polyline. Bila polyline telah terbentuk, pengkodeannya akan muncul di bawah.

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}
<div id="map"></div>
<div id="right-panel">
  <div>Encoding:</div>
  <textarea id="encoded-polyline"></textarea>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 50%;
  float: left;
}
#right-panel {
  width: 46%;
  float: left;
}
#encoded-polyline {
  height: 100px;
  width: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}

Tampilkan contoh (geometry-encodings.html).

Fungsi Poligon dan Polyline

Namespace pustaka geometri poly berisi fungsi utilitas yang menentukan apakah titik yang diberikan berada di dalam atau dekat poligon atau polyline.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Untuk mengetahui apakah suatu titik berada dalam poligon, teruskan titik dan poligon tersebut ke google.maps.geometry.poly.containsLocation(). Fungsi ini akan mengembalikan nilai true jika titik tersebut berada dalam poligon atau di tepinya.

Kode berikut akan menuliskan 'true' pada konsol browser jika klik pengguna berada dalam segi tiga yang didefinisikan; jika tidak, kode itu akan menulis 'false'.

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Versi lain dari kode ini akan menggambar lingkaran merah pada peta jika klik dilakukan dalam Segi Tiga Bermuda, dan hijau jika bukan:

Tampilkan contoh (poly-containsLocation)

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

Untuk menentukan apakah suatu titik berada pada atau dekat polyline, atau pada atau dekat tepi poligon, teruskan titik, polyline/poligon, dan nilai toleransi opsional dalam derajat ke google.maps.geometry.poly.isLocationOnEdge(). Fungsi ini akan mengembalikan nilai true jika jarak antara titik dan titik terdekat pada garis atau tepi berada dalam toleransi yang ditetapkan. Nilai toleransi default adalah 10-9 derajat.

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.