Vẽ bán kính xung quanh một điểm trong Google map

Tôi đang sử dụng API Google Maps và đã thêm các điểm đánh dấu. Bây giờ tôi muốn thêm bán kính 10 dặm xung quanh mỗi điểm đánh dấu, nghĩa là một vòng tròn hoạt động thích hợp khi thu phóng. Tôi không biết làm thế nào để làm điều đó và có vẻ như nó không phải là điều gì đó phổ biến.

Tôi đã tìm thấy một ví dụ có vẻ tốt và bạn cũng có thể xem qua Google Latitude. Ở đó họ sử dụng các điểm đánh dấu có bán kính, giống như tôi muốn.

Cập nhật: Google Latitude sử dụng hình ảnh được chia tỷ lệ, cách thức hoạt động? _{^{(tính năng không được dùng nữa)}}

Sử dụng Google Maps API V3, tạo một đối tượng Vòng kết nối, sau đó sử dụng bindTo () để gắn nó với vị trí của Điểm đánh dấu của bạn (vì chúng đều là bản thể 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');

Bạn có thể làm cho nó trông giống như vòng tròn Google Latitude bằng cách thay đổi FillColor, strokeColor, strokeWeight, v.v. ( API đầy đủ ).

Xem thêm mã nguồn và ảnh chụp màn hình ví dụ .

Có vẻ như phương pháp phổ biến nhất để đạt được điều này là vẽ một GPolygon với đủ điểm để mô phỏng một đường tròn. Ví dụ bạn đã tham chiếu sử dụng phương pháp này. Trang này có một ví dụ điển hình - hãy tìm hàm drawCircle trong mã nguồn.

Trong hình học hình cầu được xác định bởi các điểm, đường thẳng và góc giữa các đường đó. Bạn chỉ có những giá trị thô sơ đó để làm việc.

Do đó, một hình tròn (về dạng aa chiếu lên một hình cầu) là một cái gì đó phải được tính gần đúng bằng cách sử dụng các điểm. Càng nhiều điểm, nó sẽ càng giống hình tròn.

Nói như vậy, hãy nhận ra rằng bản đồ google đang chiếu trái đất lên một bề mặt phẳng (hãy nghĩ "cuộn" trái đất và kéo dài + làm phẳng cho đến khi nó trông "hình vuông"). Và nếu bạn có một hệ tọa độ phẳng, bạn có thể vẽ các đối tượng 2D trên đó tất cả những gì bạn muốn.

Nói cách khác, bạn có thể vẽ một vòng tròn vector được chia tỷ lệ trên bản đồ google. Vấn đề là, bản đồ google không cung cấp cho bạn điều đó (họ muốn giữ càng gần các giá trị GIS càng tốt về mặt thực tế càng tốt). Họ chỉ cung cấp cho bạn GPolygon mà họ muốn bạn sử dụng để ước lượng một vòng tròn. Tuy nhiên, anh chàng này đã làm điều đó bằng cách sử dụng vml cho IE và svg cho các trình duyệt khác (xem phần "SCALED CIRCLES").

Bây giờ, trở lại câu hỏi của bạn về Google Latitude bằng hình ảnh vòng tròn quy mô (và điều này có lẽ là hữu ích nhất cho bạn): nếu bạn biết bán kính của vòng tròn của bạn sẽ không bao giờ thay đổi (ví dụ như nó luôn luôn 10 dặm xung quanh một số điểm), sau đó giải pháp đơn giản nhất là sử dụng GGroundOverlay , chỉ là một url hình ảnh + GLatLngBounds mà hình ảnh đại diện. Công việc duy nhất bạn cần làm sau đó là lưu trữ GLatLngBounds đại diện cho bán kính 10 dặm của bạn. Khi bạn có điều đó, api google maps sẽ xử lý việc thu nhỏ hình ảnh của bạn khi người dùng phóng to và thu nhỏ.

Tôi đã gặp sự cố này trong quá khứ, vì vậy tôi đã đánh dấu cuộc thảo luận này .

Tóm lại, bạn có thể:

1. Hãy xem mã nguồn của bộ lọc vòng kết nối này và tìm ra cách kết hợp nó vào dự án của bạn.
2. Vẽ một GPolygon với đủ điểm để mô phỏng một đường tròn.
3. Tạo tệp KML bằng cách sửa đổi http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 rồi nhập tệp đó. Trong Google Maps, bạn chỉ có thể dán URI vào hộp tìm kiếm và nó sẽ hiển thị trên bản đồ. Mặc dù vậy, tôi không chắc bạn có thể làm như thế nào bằng cách sử dụng API.

Tôi vừa viết một bài blog đề cập chính xác vấn đề này mà bạn có thể thấy hữu ích: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Về cơ bản, bạn cần tạo một GGroundOverlay với GLatLngBounds chính xác. Một chút khó khăn là tính ra tọa độ góc tây nam và tọa độ góc đông bắc của hình vuông tưởng tượng này (GLatLngBounds) giới hạn vòng tròn này, dựa trên bán kính mong muốn. Phép toán khá phức tạp, nhưng bạn có thể tham khảo hàm getDestLatLng trong blog. Phần còn lại sẽ khá đơn giản.

Để biết giải pháp API v3, hãy tham khảo:

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

Nó tạo ra vòng tròn xung quanh các điểm và sau đó hiển thị các điểm đánh dấu trong và ngoài phạm vi với các màu khác nhau. Họ cũng tính toán bán kính động nhưng trong trường hợp của bạn bán kính là cố định nên có thể ít công việc hơn.