Google haritasında bir noktanın etrafına yarıçap çizin

Google Haritalar API'sını kullanıyorum ve işaretçiler ekledim. Şimdi her işaretçinin etrafına 10 millik bir yarıçap eklemek istiyorum, yani yakınlaştırma sırasında uygun şekilde davranan bir daire. Bunu nasıl yapacağım konusunda hiçbir fikrim yok ve görünüşe göre bu sıradan bir şey değil.

İyi görünen bir örnek buldum ve Google Latitude'a da göz atabilirsiniz. Orada, tıpkı benim istediğim gibi yarıçaplı işaretçiler kullanıyorlar.

Güncelleme: Google Latitude ölçeklenmiş bir resim kullanıyor , bu nasıl çalışır? _{^{(özellik kullanımdan kaldırıldı)}}

Google Maps API V3'ü kullanarak bir Circle nesnesi oluşturun, ardından onu İşaretleyicinizin konumuna bağlamak için bindTo () kullanın (her ikisi de google.maps.MVCObject örnekleri olduğu için).

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

FillColor, strokColor, strokWeight, vb. ( Tam API ) değiştirerek tıpkı Google Latitude dairesi gibi görünmesini sağlayabilirsiniz .

Daha fazla kaynak kodu ve örnek ekran görüntülerine bakın .

Görünüşe göre bunu başarmanın en yaygın yöntemi, bir daireyi simüle etmek için yeterli noktaya sahip bir GPolygon çizmektir . Referans verdiğiniz örnek bu yöntemi kullanıyor. Bu sayfanın iyi bir örneği var - kaynak kodda drawCircle fonksiyonunu arayın .

Küresel geometride şekiller, bu çizgiler arasındaki noktalar, çizgiler ve açılarla tanımlanır. Sadece üzerinde çalışabileceğiniz ilkel değerlere sahipsiniz.

Bu nedenle, bir daire (bir küre üzerine yansıtılan bir şekil açısından) noktalar kullanılarak yaklaştırılması gereken bir şeydir. Ne kadar çok nokta olursa o kadar çok daire gibi görünür.

Bunu söyledikten sonra, google haritalarının dünyayı düz bir yüzeye yansıttığını fark edin (dünyayı "açmayı" ve "kare" görünene kadar uzatmayı + düzleştirmeyi düşünün). Düz bir koordinat sisteminiz varsa, üzerine istediğiniz kadar 2D nesneler çizebilirsiniz.

Başka bir deyişle yapabilirsiniz google harita üzerinde ölçekli vektör daire çizin. İşin püf noktası, google maps bunu size kutunun dışında vermiyor (pragmatik olarak mümkün olduğu kadar GIS değerlerine yakın kalmak istiyorlar). Size sadece bir daireye yaklaşmak için kullanmanızı istedikleri GPolygon verirler. Ancak, bu adam bunu IE için vml ve diğer tarayıcılar için svg kullanarak yaptı ("SCALED CIRCLES" bölümüne bakın).

Şimdi, ölçeklendirilmiş bir daire resmi kullanarak Google Latitude hakkındaki sorunuza geri dönersek (ve bu muhtemelen sizin için en yararlı olanıdır): çemberinizin yarıçapının asla değişmeyeceğini biliyorsanız (örneğin, bir noktanın etrafında her zaman 10 mildir), o zaman en kolay çözüm , sadece bir resim url'si + resmin temsil ettiği GLatLngBounds olan bir GGroundOverlay kullanmaktır . O zaman yapmanız gereken tek iş , 10 mil yarıçapınızı temsil eden GLatLngBounds'u hesaplamaktır . Buna sahip olduğunuzda, google maps api, kullanıcı yakınlaştırıp uzaklaştırırken görüntünüzü ölçeklendirir.

Geçmişte bu sorunu yaşadım, bu yüzden bu tartışmayı işaretledim .

Özetlemek için şunları yapabilirsiniz:

1. Bu daire filtresinin kaynak koduna bir göz atın ve bunu projenize nasıl dahil edeceğinizi öğrenin.
2. Bir daireyi simüle etmek için yeterli noktaya sahip bir GPolygon çizin.
3. Http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024'ü değiştirip içe aktararak bir KML dosyası oluşturun . Google Haritalar'da, URI'yi arama kutusuna yapıştırmanız yeterlidir ve haritada görüntülenecektir. Yine de API kullanarak bunu nasıl yapacağınızdan emin değilim.

Tam olarak bunu ele alan ve yararlı bulabileceğiniz bir blog makalesi yazdım: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Temel olarak, doğru GLatLngBounds ile bir GGroundOverlay oluşturmanız gerekir. Zor olan kısım, istenen yarıçapa göre bu daireyi sınırlayan bu hayali karenin (GLatLngBounds) güneybatı köşe koordinatı ve kuzeydoğu köşe koordinatı üzerinde çalışmaktır. Matematik oldukça karmaşık, ancak blogdaki getDestLatLng işlevine başvurabilirsiniz. Gerisi oldukça basit olmalı.

API v3 çözümü için şunlara bakın:

http://blog.enbake.com/draw-circle-with-google-maps-api-v3

Noktaların etrafında daire oluşturur ve ardından farklı renklerle aralık içinde ve dışında işaretler gösterir. Ayrıca dinamik yarıçapı da hesaplarlar, ancak sizin durumunuzda yarıçap sabit olduğundan daha az iş olabilir.