Google Maps API v3 Circle Overlay Issues
your help would be much appreciated with the following. I am using the JS code at http://jsfiddle.net/jpEwM to display a Google Map with a re-sizable circle overlay to output a centre point co-ordinate, radius and bounding box.
This is working well, but there are a few additional features which I am unable to integrate without breaking the code:
I would like to output the place name at the centre of the overlay as well as its cooordinates.
It is easy to lose the circle overlay when moving around the map. I would like to be able to make the circle overlay always visible within the viewport (i.e. if you scroll the map far enough to lose the circle overlay it would 'jump' back to the centre of the viewport, or even better the cursor position).
If you zoom into the map you can end up entirely inside the circle overlay. Is it possible to resize the c开发者_如何学Circle overlay on zoom so that this cannot happen?
When I add markers to the map from an XML file, it breaks the rest of the current functionality. Ideally I would like to use the MarkerClusterer to do this, but basic markers would be fine too.
Sorry there are so many points - I've been pulling my hair out over this for weeks now!
Many Thanks.
To answer point 3:
You need to add a listener for bound changes:
google.maps.event.addListener(map, 'bounds_changed', function() {
displayInfo(distanceWidget,map);
});
Notice that I have added a map parameter to your displayInfo method, which now looks like this:
function displayInfo(widget, map) {
var info = document.getElementById('info');
info.innerHTML = 'Position: ' + widget.get('position') + '<br />' + 'Distance: ' + widget.get('distance') + '<br />' + 'Bounds: ' + widget.get('bounds') +'<br/>Map bounds: '+ map.getBounds();
}
With this change you'll see that you could determine when the bounds of your distanceWidget exceed those of the map and take the necessary steps to reduce the diameter of your widget.
My fork (which includes the above changed) of your excellent jsFiddle is here: http://jsfiddle.net/bhofmann/AT8uz/
精彩评论