Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
288 views
in Technique[技术] by (71.8m points)

javascript - How to block google maps api v3 panning in the gray zone over north pole or under south pole?

Using google maps v3 javascript API i cannot find a way to block the panning of the map over the north pole or under the south pole. As an example embedded maps on this page: https://developers.google.com/maps/documentation/embed/guide has the same behaviour, zooming out with the world view and panning north bring the view in a complete gray area.

How to prevent like it's done on official site http://maps.google.it ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

UPDATE - The following answer doesn't look to work anymore, I suppose it's because google maps API has been upgrade. I leave the code here for reference.

Thanks to geocodezip comments i modified Mike Williams' solution for my case.

Here is the fiddle example

Relevant code part:

google.maps.event.addListener(map, 'center_changed', function() {
    checkBounds(map);
});
// If the map position is out of range, move it back
function checkBounds(map) {

var latNorth = map.getBounds().getNorthEast().lat();
var latSouth = map.getBounds().getSouthWest().lat();
var newLat;

if(latNorth<85 && latSouth>-85)     /* in both side -> it's ok */
    return;
else {
    if(latNorth>85 && latSouth<-85)   /* out both side -> it's ok */
        return;
    else {
        if(latNorth>85)   
            newLat =  map.getCenter().lat() - (latNorth-85);   /* too north, centering */
        if(latSouth<-85) 
            newLat =  map.getCenter().lat() - (latSouth+85);   /* too south, centering */
    }   
}
if(newLat) {
    var newCenter= new google.maps.LatLng( newLat ,map.getCenter().lng() );
    map.setCenter(newCenter);
    }   
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...