Google Maps API适用于将地图向左或向右移动

时间:2016-06-15 02:53:05

标签: javascript google-maps google-maps-api-3

我有一个应用程序,我保存中心纬度,经度以及地图中心和东北角之间的距离,这样我们就可以用我们保存的相同边界绘制地图。 我在使用存储数据绘制地图时遇到的第一个问题是使用fitbounds()将边距添加到我传递的边界,这增加了额外的缩放级别,使用它时地图看起来与原始版本非常不同地图。为了解决这个问题,我使用#{3}}

中的解决方案#6重新计算边界

我使用map.fitbounds(new bounds),结果是由于fitbounds方法添加的边距重新计算边界。

但是现在我注意到当我使用存储在数据库中的值绘制地图时,地图会随机向右或向左移动,这在低缩放级别上更为明显。我希望你能说出为什么会这样,或者我该如何解决它。谢谢。

1 个答案:

答案 0 :(得分:1)

您可以编写自定义函数以处理边距。请查看myFitBounds()函数的实现。

代码段

#include <iostream>
#include <AL/alc.h>
#include <AL/al.h>
#include <cmath>

using namespace std;

int main() {
    // Reset error state just to be sure
    alGetError();

    ALCdevice *device = alcOpenDevice(NULL);
    if (device == NULL) {
        cout << "Error creating device" << endl;
        return 1;
    }

    ALCcontext *context = alcCreateContext(device, NULL);
    if (!alcMakeContextCurrent(context)) {
        cout << "Failed to make context current" << endl;
        return 1;
    }

    ALuint buffer;

    // Set up sound buffer
    alGenBuffers((ALuint)1, &buffer);

    // Fill buffer with sine-wave
    float freq = 440.f;
    int seconds = 4;
    unsigned sample_rate = 22050;
    size_t buf_size = seconds * sample_rate;

    short *samples;
    samples = new short[buf_size];
    for(int i=0; i<buf_size; ++i) {
        samples[i] = (short) (32760 * sin((2.f * float(M_PI) * freq) / sample_rate * i ));
    }

    alBufferData(buffer, AL_FORMAT_MONO16, samples, buf_size, sample_rate);

    ALuint source;

    // Set up sound source
    alGenSources((ALuint)1, &source);
    alSourcef(source, AL_PITCH, 1);
    alSourcef(source, AL_GAIN, 1);
    alSource3f(source, AL_POSITION, 0, 0, 0);
    alSource3f(source, AL_VELOCITY, 0, 0, 0);
    alSourcei(source, AL_LOOPING, AL_FALSE);
    alSourcei(source, AL_BUFFER, buffer);

    // Start playing
    alSourcePlay(source);

    // Wait until the sound stops playing
    ALenum state;
    do {
        alGetSourcei(source, AL_SOURCE_STATE, &state);
    } while (state == AL_PLAYING);

    // Clean up
    alDeleteSources(1, &source);
    alcMakeContextCurrent(NULL);
    alcDestroyContext(context);
    alcCloseDevice(device);

    return 0;
}
var map; 
function myFitBounds(myMap, bounds) {
    myMap.fitBounds(bounds);

    var overlayHelper = new google.maps.OverlayView();
    overlayHelper.draw = function () {
        if (!this.ready) {
            var projection = this.getProjection(),
            zoom = getExtraZoom(projection, bounds, myMap.getBounds());
            if (zoom > 0) {
                myMap.setZoom(myMap.getZoom() + zoom);
            }
            this.ready = true;
            google.maps.event.trigger(this, 'ready');
        }
    };
    overlayHelper.setMap(myMap);
}

// LatLngBounds b1, b2 -> zoom increment
function getExtraZoom(projection, expectedBounds, actualBounds) {
    var expectedSize = getSizeInPixels(projection, expectedBounds),
        actualSize = getSizeInPixels(projection, actualBounds);

    if (Math.floor(expectedSize.x) == 0 || Math.floor(expectedSize.y) == 0) {
        return 0;
    }

    var qx = actualSize.x / expectedSize.x;
    var qy = actualSize.y / expectedSize.y;
    var min = Math.min(qx, qy);

    if (min < 1) {
        return 0;
    }

    return Math.floor(Math.log(min) / Math.log(2) /* = log2(min) */);
}

// LatLngBounds bnds -> height and width as a Point
function getSizeInPixels(projection, bounds) {
    var sw = projection.fromLatLngToContainerPixel(bounds.getSouthWest());
    var ne = projection.fromLatLngToContainerPixel(bounds.getNorthEast());
    return new google.maps.Point(Math.abs(sw.y - ne.y), Math.abs(sw.x - ne.x));
}  

function initialize() { 
    var mapOptions = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34.397, 150.644), 
        panControl: false, 
        zoomControl: false, 
        mapTypeControl: false, 
        scaleControl: false, 
        streetViewControl: false, 
        overviewMapControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    bounds = new google.maps.LatLngBounds(); 
    var extendPoint1 = new google.maps.LatLng(35.491823,6.626860999999963); 
    var extendPoint2 = new google.maps.LatLng(47.09192,18.520579999999995); 
    new google.maps.Marker({position: extendPoint1,map: map}); 
    new google.maps.Marker({position: extendPoint2,map: map}); 
    bounds.extend(extendPoint1); 
    bounds.extend(extendPoint2); 
    myFitBounds(map,bounds);  
    //map.fitBounds(bounds);
} 
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}