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!