pseudoGCircle() : Draw 360-sides polygon instead of google.maps.Circle.
Drawing 360-sides polygon instead of google.maps.Circle.
- Center
- new google.maps.LatLng(37.4419, -122.1419)
- Radius
- 1km (about 0.6214 miles)
/**
* @param point Center point in google.maps.LatLng
* @param radius Rarius of circle in km (1km = 0.6214 miles)
* @param color param to google.maps.Polyline (omissible)
* @param weight param to google.maps.Polyline (omissible)
* @param opacity param to google.maps.Polyline (omissible)
* @return google.maps.Polyline
*/
function pseudoGCircle(point, radius, color, weight, opacity) {
var vertex = 360;
var EquatorialRadius = 6378137; // WGS-84
var F = 298.257223563; // Inverse of Flattening: 1/f (WGS-84)
// Squared Earth's eccentricity:
// E = e^2 = 2*f - f^2 = (2*F - 1) / F^2
var E = ((2 * F) -1) / Math.pow(F, 2);
// Pi times the Equatorial Radius
var PI_ER = Math.PI * EquatorialRadius;
// 1 - e2 sin2(θ)
var TMP = 1 - E * Math.pow(Math.sin(point.latRadians()), 2);
// Length (m) of one degrees of latitude
var arc_lat = (PI_ER * (1 - E)) / (180 * Math.pow(TMP, 3/2));
// Length (m) of one degrees of longitude
var arc_lng = (PI_ER * Math.cos(point.latRadians())) / (180 * Math.pow(TMP, 1/2));
// Radius (m)
var R = radius * 1000;
var points = new Array(vertex);
for (i = 0; i <= vertex; i++) {
var rad = (i / (vertex / 2)) * Math.PI;
var lat = (R / arc_lat) * Math.sin(rad) + point.lat();
var lng = (R / arc_lng) * Math.cos(rad) + point.lng();
points[i] = new google.maps.LatLng(lat, lng);
}
return new google.maps.Polyline(points, color, weight, opacity);
}
var circle = pseudoGCircle(new google.maps.LatLng(37.4419, -122.1419), 1);
map = new google.maps.Map2(document.getElementById("map"));
map.addOverlay(circle);
Constant numbers preprocessed
/**
* @param point Center point in google.maps.LatLng
* @param radius Rarius of circle in km
* @param color param to google.maps.Polyline (omissible)
* @param weight param to google.maps.Polyline (omissible)
* @param opacity param to google.maps.Polyline (omissible)
* @return google.maps.Polyline
*/
function pseudoGCircle(point, radius, color, weight, opacity) {
var vertex = 360;
var TMP = 1 - E * Math.pow(Math.sin(point.latRadians()), 2);
var A = 110574.27582159444444444444444444; // (PI_ER * (1 - E)) / 180
var B = 111319.49079327333333333333333333; // PI_ER / 180
var arc_lat = A / Math.pow(TMP, 3/2);
var arc_lng = (B * Math.cos(point.latRadians())) / Math.pow(TMP, 1/2);
var R = radius * 1000;
var points = new Array(vertex);
for (i = 0; i <= vertex; i++) {
var rad = (i / (vertex / 2)) * Math.PI;
var lat = (R / arc_lat) * Math.sin(rad) + point.lat();
var lng = (R / arc_lng) * Math.cos(rad) + point.lng();
points[i] = new google.maps.LatLng(lat, lng);
}
return new google.maps.Polyline(points, color, weight, opacity);
}
var circle = pseudoGCircle(new google.maps.LatLng(37.4419, -122.1419), 1);
map = new google.maps.Map2(document.getElementById("map"));
map.addOverlay(circle);
How many vertexes do you need?
Too many vertexes may freeze client's PC!