Desenhe o raio em torno de um ponto no mapa do Google

Estou usando a API do Google Maps e adicionei marcadores. Agora, quero adicionar um raio de 10 milhas ao redor de cada marcador, o que significa um círculo que se comporta de maneira adequada durante o zoom. Não tenho ideia de como fazer isso e parece que não é algo comum.

Eu encontrei um exemplo que parece bom e você pode dar uma olhada no Google Latitude também. Lá eles usam marcadores com raio, como eu quero.

Atualização: o Google Latitude usa uma imagem que é dimensionada, como isso funcionaria? _{^{(recurso suspenso)}}

Usando a API V3 do Google Maps, crie um objeto Circle e, em seguida, use bindTo () para vinculá-lo à posição de seu Marker (já que ambos são instâncias 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');

Você pode torná-lo parecido com o círculo do Google Latitude alterando fillColor, strokeColor, strokeWeight etc ( API completa ).

Veja mais código-fonte e capturas de tela de exemplo .

Parece que o método mais comum de conseguir isso é desenhar um GPolygon com pontos suficientes para simular um círculo. O exemplo que você referenciou usa este método. Esta página tem um bom exemplo - procure a função drawCircle no código-fonte.

Na geometria esférica, as formas são definidas por pontos, linhas e ângulos entre essas linhas. Você tem apenas aqueles valores rudimentares para trabalhar.

Portanto, um círculo (em termos de uma forma projetada em uma esfera) é algo que deve ser aproximado usando pontos. Quanto mais pontos, mais parecido com um círculo.

Dito isso, perceba que o google maps está projetando a terra em uma superfície plana (pense em "desenrolar" a terra e esticar + achatar até que pareça "quadrada"). E se você tiver um sistema de coordenadas plano, poderá desenhar objetos 2D nele o quanto quiser.

Em outras palavras, você pode desenhar um círculo vetorial em escala em um mapa do Google. O problema é que o google maps não oferece isso fora da caixa (eles querem ficar o mais próximo possível dos valores GIS quanto for pragmaticamente possível). Eles fornecem apenas GPolygon que eles querem que você use para aproximar um círculo. No entanto, esse cara fez isso usando vml para IE e svg para outros navegadores (consulte a seção "CÍRCULOS EM ESCALA").

Agora, voltando à sua pergunta sobre o Google Latitude usando uma imagem de círculo em escala (e esta é provavelmente a mais útil para você): se você sabe que o raio de seu círculo nunca mudará (por exemplo, ele está sempre 10 milhas em torno de algum ponto), então a solução mais fácil seria usar um GGroundOverlay , que é apenas um url de imagem + o GLatLngBounds que a imagem representa. O único trabalho que você precisa fazer é calcular o GLatLngBounds representando seu raio de 10 milhas. Assim que tiver isso, a API do google maps lida com o dimensionamento de sua imagem conforme o usuário aumenta e diminui o zoom.

Já tive esse problema no passado, então marquei esta discussão.

Para resumir, você pode:

1. Dê uma olhada no código-fonte deste filtro circular e descubra como incorporá-lo ao seu projeto.
2. Desenhe um GPolygon com pontos suficientes para simular um círculo.
3. Gere um arquivo KML modificando http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 e importando-o. No Google Maps, você pode simplesmente colar o URI na caixa de pesquisa e ele será exibido no mapa. Não tenho certeza de como você pode fazer isso usando a API.

Acabei de escrever um artigo de blog que aborda exatamente isso, que pode ser útil: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Basicamente, você precisa criar um GGroundOverlay com o GLatLngBounds correto. A parte complicada está em calcular a coordenada do canto sudoeste e a coordenada do canto nordeste deste quadrado imaginário (o GLatLngBounds) que delimita este círculo, com base no raio desejado. A matemática é bastante complicada, mas você pode apenas consultar a função getDestLatLng no blog. O resto deve ser bastante simples.

Para uma solução API v3, consulte:

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

Ele cria um círculo ao redor dos pontos e mostra marcadores dentro e fora da faixa com cores diferentes. Eles também calculam o raio dinâmico, mas no seu caso o raio é fixo, portanto, pode ser menos trabalhoso.