Google Haritalar Yer Paylaşımları


Google Haritalar - Bindirmeler

Bindirmeler, haritadaki enlem/boylam koordinatlarına bağlı nesnelerdir.

Google Haritalar'ın çeşitli bindirme türleri vardır:

  • İşaretleyici - Bir haritadaki tek konumlar. İşaretçiler ayrıca özel simge resimlerini de görüntüleyebilir
  • Polyline - Bir haritadaki düz çizgiler dizisi
  • Çokgen - Bir haritadaki düz çizgiler dizisi ve şekil "kapalı"
  • Daire ve Dikdörtgen
  • Bilgi Pencereleri - İçeriği bir haritanın üzerinde açılır bir balon içinde görüntüler
  • Özel kaplamalar

Google Haritalar - Bir İşaretçi Ekle

Marker yapıcısı bir işaretleyici oluşturur. İşaretçinin görüntülenmesi için konum özelliğinin ayarlanması gerektiğini unutmayın.

setMap() yöntemini kullanarak işaretçiyi haritaya ekleyin:

Örnek

var marker = new google.maps.Marker({position: myCenter});

marker.setMap(map);


Google Haritalar - İşaretçiyi Canlandır

Aşağıdaki örnek, işaretçinin animasyon özelliğiyle nasıl canlandırılacağını gösterir:

Örnek

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);

Google Haritalar - İşaretleyici Yerine Simge

Aşağıdaki örnek, varsayılan işaretleyici yerine kullanılacak bir resmi (simgeyi) belirtir:

Örnek

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});

marker.setMap(map);

Google Haritalar - Çoklu Çizgi

Çoklu Çizgi, sıralı bir sırayla bir dizi koordinat boyunca çizilen bir çizgidir.

Bir çoklu çizgi aşağıdaki özellikleri destekler:

  • yol - hat için birkaç enlem/boylam koordinatı belirtir
  • StrokColor - satır için onaltılık bir renk belirtir (format: "#FFFFFF")
  • StrokOpacity - satırın opaklığını belirtir (0.0 ile 1.0 arasında bir değer)
  • StrokWeight - çizginin konturunun piksel cinsinden ağırlığını belirtir
  • editable - satırın kullanıcılar tarafından düzenlenebilir olup olmadığını tanımlar (doğru/yanlış)

Örnek

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

Google Haritalar - Çokgen

Bir Çokgen, sıralı bir sırayla bir dizi koordinattan oluşması bakımından bir Çoklu Çizgiye benzer. Bununla birlikte, çokgenler, kapalı bir döngü içindeki bölgeleri tanımlamak için tasarlanmıştır.

Çokgenler düz çizgilerden oluşur ve şekil "kapalı"dır (tüm çizgiler birbirine bağlanır).

Bir çokgen aşağıdaki özellikleri destekler:

  • path - çizgi için birkaç LatLng koordinatını belirtir (ilk ve son koordinat eşittir)
  • StrokColor - satır için onaltılık bir renk belirtir (format: "#FFFFFF")
  • StrokOpacity - satırın opaklığını belirtir (0.0 ile 1.0 arasında bir değer)
  • StrokWeight - çizginin konturunun piksel cinsinden ağırlığını belirtir
  • fillColor - kapalı bölge içindeki alan için onaltılık bir renk belirtir (format: "#FFFFFF")
  • fillOpacity - dolgu renginin opaklığını belirtir (0.0 ile 1.0 arasında bir değer)
  • editable - satırın kullanıcılar tarafından düzenlenebilir olup olmadığını tanımlar (doğru/yanlış)

Örnek

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Haritalar - Daire

Bir daire aşağıdaki özellikleri destekler:

  • center - dairenin merkezinin google.maps.LatLng değerini belirtir
  • yarıçap - dairenin yarıçapını metre cinsinden belirtir
  • konturColor - dairenin etrafındaki çizgi için onaltılık bir renk belirtir (format: "#FFFFFF")
  • konturOpacity - kontur renginin opaklığını belirtir (0.0 ile 1.0 arasında bir değer)
  • StrokWeight - çizginin konturunun piksel cinsinden ağırlığını belirtir
  • fillColor - daire içindeki alan için onaltılık bir renk belirtir (format: "#FFFFFF")
  • fillOpacity - dolgu renginin opaklığını belirtir (0.0 ile 1.0 arasında bir değer)
  • düzenlenebilir - dairenin kullanıcılar tarafından düzenlenebilir olup olmadığını tanımlar (doğru/yanlış)

Örnek

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Haritalar - InfoWindow

Bir işaretçi için bazı metin içeriğine sahip bir InfoWindow gösterin:

Örnek

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});

infowindow.open(map,marker);