Draw (inverted) geometric circle in google maps api v3
I'm looking for a way to draw an inverted geometric (not geographical) circle in google maps api v3.
Essentially the goal is to dim the map except around a map object - as a way to make the map object stand out. To do this, I have employed an inverted overlay and have a method to create the circle "hole" in my "shadow-overlay".
However the method I've employed to get the lat/lng coordinates to generate this circle is adjusted to the Mercator projection and is not a consistent size or shape because it is relative to it's position from the equator. The method needs to create a circle (without using google's circle object - or using it with a way to extract it's path) that will calculate the lat/lng points from a center, based on a radius field that doesn't take the Mercator projection into account - such that it will display a perfect circle anywhere it is drawn on the map.
It shouldnt be hard, but I'm struggling to convert this function to NOT apply the Mercator projection into the result:
function getCircleCoords(point, radius) {
var d2r = Math.PI / 180; // degrees to radians
var points = 90;
var circleLatLngs = new Array();
var circleLat = radius * 0.621371192 * 0.014483;
var circleLng = circleLat / Math.cos( point.lat() * d2r);
for (var i = 0; i < points+1; i++) {
var theta = Math.PI * (i / (points / 2));
var vertexLat = point.lat() + (circleLat * Math.sin(theta));
var vertexLng = point.lng() + (circleLng * Math.cos(theta));
var vertexLat = point.lat() + (circleLat * (theta));
var vertexLng = point.lng() + (circleLng * (theta));
var vertextLatLng = new google.maps.LatLng(vertexLat, vertexLng);
circleLatLngs.push( vertextLatLng );
}
return circleLatLngs;
}
This would then get called like:
feature = new google.maps.Polygon({
paths: [[my_shadow_layer_path],[getCircleCoords(latLng_, 800)] ],
fillColor: '#ff0000',
fillOpacity: 0.5,
map: map_
});
}
Thoughts?
To use a Polygon, you need to calculate the circle coordinates in pixel (world) coordinates translate them to geographic coordinates using fromPointToLatLng to get the appropriate coordinates for the circle. Or use an overlay of the correct size and handle zoom changes yourself.
You can try this library https://github.com/raihan2006i/google-map-inverted-circle. which works on Google Map V3. See below for example code blocks
var iCircle;
var map;
function initialize() {
var mapDiv = document.getElementById('gMap');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
iCircle = new InvertedCircle({
center: map.getCenter(),
map: map,
radius: 5000, // 5 km
editable: true,
stroke_weight: 5,
fill_opacity: 0.5,
fill_color: "#ff0000"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
上一篇: 扩展AndEngine渲染3D模型的问题