How to center a google map marker with a smooth zoom (api V3)?
i'm using map.panTo()
to have a nice smooth transition between the markers, when i click from a list of locations, but i can't see a similar methods for the zoom...I imagine something like setZoom(13, 1500开发者_高级运维)
where 1500 is the duration...
any clue?
The only native function to zoom so far is map.setZoom which does not let you change the speed.
If you want to set your map to the zoom level based on a set of markers you can do something like this:
var bounds : LatLngBounds = new LatLngBounds(southwestmarker.getLatLng(), northeastmarker.getLatLng());
bounds.extend(someMarker.getLatLng());
//some more extend() here
map.setZoom(map.getBoundsZoomLevel(bounds));
I've found that the map.setZoom
will smooth the transition if the zoom level is within 2 of the current zoom level.
So if the map is set to zoom of 10, and I set it to 12 it will transition. However if I set it to 13 it wouldn't.
Also you can set zoom to a non whole number but the map tiles will not load and state 'Sorry, we have no imagery here'.
You could try chaining zooms but I they ease in/out so it would look jerky.
If the transition is more than 2 and it's important to be smooth, you could manually edit the matrix transform on one of the map DOM elements. It looks like -webkit-transform: matrix(1, 0, 0, 1, -62, 71);
. Changing the 1st and 4th numbers would affect the scale, the first is x-scale and 4th is y-scale.
The matrix is like so transform: matrix(xs, 0, 0, ys, xt, yt);
, where xs
and ys
are the scale, setting it to 2 would zoom in 200%. This matrix does take fractional values, so you can zoom to 1.1 etc. You could then map.setZoom()
to your final number at the end of the transition.
This does have some caveats as it's not the intended usage:
- Panning or zooming while transitioning would break the matrix transformation by resetting it to Google's own methods.
- Zooming out is harder because the surrounding tiles (beyond the viewport) aren't loaded - defaulting to a grey square. You could have a duplicate map with a viewport the size of your current map multiplied by the factor you're zooming out - so if you were zooming out so your map was half the size, then the viewport would be double. You could then place the viewport over the top and set the zoom on the 'real' map, transition the adjusted viewport map and hide it on completion.
精彩评论