วาดรัศมีรอบ ๆ จุดในแผนที่ Google

ฉันใช้ Google Maps API และได้เพิ่มเครื่องหมาย ตอนนี้ฉันต้องการเพิ่มรัศมี 10 ไมล์รอบ ๆ เครื่องหมายแต่ละอันหมายถึงวงกลมที่ทำงานอย่างเหมาะสมขณะซูม ฉันไม่รู้ว่าจะทำอย่างไรและดูเหมือนว่ามันจะไม่ใช่เรื่องธรรมดา

ฉันพบตัวอย่างหนึ่งที่ดูดีและคุณสามารถดู Google Latitude ได้เช่นกัน ที่นั่นใช้เครื่องหมายที่มีรัศมีเหมือนที่ฉันต้องการ

อัปเดต: Google Latitude ใช้รูปภาพที่ปรับขนาดแล้วจะทำงานอย่างไร _{^{(เลิกใช้งานคุณลักษณะแล้ว)}}

ใช้ Google Maps API V3 สร้างวัตถุวงกลมจากนั้นใช้ bindTo () เพื่อผูกเข้ากับตำแหน่งของ Marker ของคุณ (เนื่องจากทั้งคู่เป็นอินสแตนซ์ google.maps.MVCObject)

// 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');

คุณสามารถทำให้ดูเหมือนวงกลม Google Latitude ได้โดยการเปลี่ยน FillColor, strokeColor, strokeWeight และอื่น ๆ ( API แบบเต็ม )

ดูรายละเอียดเพิ่มเติมแหล่งที่มาของรหัสและตัวอย่างภาพหน้าจอ

ดูเหมือนว่าวิธีการทั่วไปในการบรรลุเป้าหมายนี้คือการวาดGPolygon ที่มีจุดเพียงพอที่จะจำลองวงกลม ตัวอย่างที่คุณอ้างถึงใช้วิธีนี้ หน้านี้มีตัวอย่างที่ดี - มองหาฟังก์ชันdrawCircleในซอร์สโค้ด

ในรูปทรงเรขาคณิตทรงกลมถูกกำหนดโดยจุดเส้นและมุมระหว่างเส้นเหล่านั้น คุณมีเพียงค่าพื้นฐานเหล่านั้นเท่านั้นที่จะใช้งานได้

ดังนั้นวงกลม (ในรูปของ aa ที่ฉายบนทรงกลม) จึงเป็นสิ่งที่ต้องประมาณโดยใช้จุด ยิ่งจุดมากเท่าไหร่ก็จะดูเหมือนวงกลมมากขึ้นเท่านั้น

ต้องบอกว่าโปรดทราบว่า Google Maps กำลังฉายโลกลงบนพื้นผิวเรียบ (ให้คิดว่า "คลี่" พื้นโลกและยืดตัว + แบนราบจนกว่าจะมีลักษณะเป็น "สี่เหลี่ยมจัตุรัส") และถ้าคุณมีระบบพิกัดแบบแบนคุณสามารถวาดวัตถุ 2 มิติลงไปได้ทั้งหมดที่คุณต้องการ

กล่าวอีกนัยหนึ่งคุณสามารถวาดวงกลมเวกเตอร์ที่ปรับขนาดบนแผนที่ Google ได้ สิ่งที่จับได้คือแผนที่ Google ไม่ได้มอบให้คุณนอกกรอบ (พวกเขาต้องการให้ใกล้เคียงกับค่า GIS มากที่สุดเท่าที่จะเป็นไปได้ในทางปฏิบัติ) พวกเขาให้เฉพาะ GPolygon ที่ต้องการให้คุณใช้เพื่อประมาณวงกลมเท่านั้น อย่างไรก็ตามผู้ชายคนนี้ใช้ vml สำหรับ IE และ svg สำหรับเบราว์เซอร์อื่น ๆ (ดูส่วน "SCALED CIRCLES")

ตอนนี้กลับไปที่คำถามของคุณเกี่ยวกับ Google Latitude โดยใช้ภาพวงกลมที่ปรับขนาด (และนี่อาจเป็นประโยชน์สำหรับคุณมากที่สุด): ถ้าคุณรู้ว่ารัศมีของวงกลมของคุณจะไม่มีวันเปลี่ยนแปลง (เช่นมันเป็น 10 ไมล์ในบางจุดเสมอ) วิธีแก้ปัญหาที่ง่ายที่สุดคือใช้GGroundOverlayซึ่งเป็นเพียง URL ของรูปภาพ + GLatLngBounds ที่รูปภาพแสดง งานเดียวที่คุณต้องทำคือคำนวณGLatLngBounds ที่แสดงรัศมี 10 ไมล์ของคุณ เมื่อคุณได้สิ่งนั้นแล้ว api ของ google maps จะจัดการการปรับขนาดภาพของคุณเมื่อผู้ใช้ซูมเข้าและออก

ฉันเคยมีปัญหานี้ในอดีตดังนั้นฉันจึงบุ๊กมาร์กการสนทนานี้

โดยสรุปคุณสามารถ:

1. ดูซอร์สโค้ดของตัวกรองแวดวงนี้และดูวิธีรวมเข้ากับโปรเจ็กต์ของคุณ
2. วาด GPolygon ที่มีจุดเพียงพอที่จะจำลองวงกลม
3. สร้างไฟล์ KML โดยแก้ไขhttp://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024แล้วจึงนำเข้า ใน Google Maps คุณสามารถวาง URI ในช่องค้นหาและจะแสดงบนแผนที่ ฉันไม่แน่ใจว่าคุณจะทำได้อย่างไรโดยใช้ API

ฉันเพิ่งเขียนบทความบล็อกที่กล่าวถึงสิ่งนี้ซึ่งคุณอาจพบว่ามีประโยชน์: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

โดยพื้นฐานแล้วคุณต้องสร้าง GGroundOverlay ด้วย GLatLngBounds ที่ถูกต้อง บิตที่ยุ่งยากคือการหาพิกัดมุมตะวันตกเฉียงใต้และพิกัดมุมตะวันออกเฉียงเหนือของจัตุรัสจินตภาพนี้ (GLatLngBounds) ที่ล้อมวงกลมนี้ตามรัศมีที่ต้องการ คณิตศาสตร์ค่อนข้างซับซ้อน แต่คุณสามารถอ้างถึงฟังก์ชัน getDestLatLng ในบล็อกได้ ส่วนที่เหลือควรจะตรงไปตรงมา

สำหรับโซลูชัน API v3 โปรดดูที่:

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

จะสร้างวงกลมรอบ ๆ จุดแล้วแสดงเครื่องหมายภายในและนอกช่วงด้วยสีที่ต่างกัน นอกจากนี้ยังคำนวณรัศมีแบบไดนามิก แต่ในรัศมีกรณีของคุณได้รับการแก้ไขดังนั้นอาจทำงานน้อยลง