panmap.js在pan之后变得跳跃

时间:2013-12-19 21:31:32

标签: javascript google-maps heatmap

我正在使用heatmap.js + googlemap。

热图显示完美,我可以毫无问题地放大和缩小。 但是一旦我拖动了地图,渲染就会变得很激动。 也就是说,在刷新时,它显示良好(与拖动同步),但立即将热图转换为拖动之前的位置。每次刷新都会像这样跳跃。

代码如下:

this.options = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: false,
          scrollwheel: true,
          draggable: true,
          navigationControl: true,
          mapTypeControl: false,
          scaleControl: true,
          disableDoubleClickZoom: false
        };
        this.map = new google.maps.Map(this.$el, this.options);

        this.heatmap = new HeatmapOverlay(this.map, {
            "radius":20,
            "visible":true, 
            "opacity":60
        });


        // this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
        var that = this;
        google.maps.event.addListenerOnce(this.map, "idle", function(){
            that.updateMap(that.map);
        });
        google.maps.event.addListener(this.map, 'bounds_changed', function(e) {
            that.updateMap(that.map);
    });

...

updateMap: function (map, callback){
        var bound = map.getBounds();
        var queryObject = {
                north: bound.getNorthEast().lat(),
                south: bound.getSouthWest().lat(),
                east : bound.getNorthEast().lng(),
                west : bound.getSouthWest().lng(),
        };
        $.getJSON('areaGeolocations', queryObject, function(data) {
            var geoData = new Array();

            $.each(data.geolocationLogs, function(key, val) {
                geoData.push({lng:val.longitude, lat:val.latitude, count:1});
            });

            that.heatmap.setDataSet({max: 5, data: geoData});
            if(callback)
                callback();
        });
    },

任何想法?

喝彩!

0 个答案:

没有答案