javascript - How to limit google maps api lag when panning the map with lots of markers and polylines? -
my question:
how make google maps move smother when there lot of markers , polylines shown on map?
i asking advices on application developed.
the issue happens in firefox when map moved up,down,left or right mouse.
the application shows about 1000 segments of polylines, , around 700 markers on map.
all data located inside 7 kml files.
all polylines segments of direction b have lots of points. think of problem caused size , number of polylines.
similar thread :
- need guidance on google map application has show 250 000 polylines
- google maps api v3 no smooth dragging
- mapping 400mb kml data in google maps - how?
thank you.
an issue has been opened similar problem else, don't think alone in situation.
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5665
i tried solution improved movement not resolve issue.
google maps api v3 no smooth dragging
http://jsfiddle.net/cx4gn/3/
var last = {time : new date(), // last time let event pass. x : -100, // last x position af event passed. y : -100}; // last y position af event passed. var period = 100; // ms - don't let pass more 1 event every 100ms. var space = 40; // px - let event pass if distance between last , // current position greater 2 px. function init_map() { map_div = document.getelementbyid("map") // map var map_options = { center: new google.maps.latlng(45.836454, 23.372497), zoom: 8 }; map = new google.maps.map(document.getelementbyid("map"), map_options); // register event handler throttle events. // "true" means capture event , event // before google maps gets it. if cancel event, // google maps never receive it. map_div.addeventlistener("mousemove", throttle_events, true); }; function throttle_events(event) { var = new date(); var distance = math.sqrt(math.pow(event.clientx - last.x, 2) + math.pow(event.clienty - last.y, 2)); var time = now.gettime() - last.time.gettime(); if (distance * time < space * period) { //event arrived or mouse moved little or both console.log("event stopped"); if (event.stoppropagation) { // w3c/addeventlistener() event.stoppropagation(); } else { // older ie. event.cancelbubble = true; }; } else { console.log("event allowed: " + now.gettime()); last.time = now; last.x = event.clientx; last.y = event.clienty; }; };
this code functional said earlier, doesn't resolve problem.
other solutions welcomed.
[edit 2014-03-14] best solution found , tested in production, , working pretty well.
Comments
Post a Comment