我正在使用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();
});
},
任何想法?
喝彩!