Map API ปัญหา location ไม่ตรงกับ Marker เมื่อใช้ Event Overlay ครับ

ตอนนี้กำลังทดลองทำโปรแกรมใส่ Marker ไปแบบสุ่ม ซึ่งสามารถแสดง Marker ตามตำแหน่งได้แล้ว 

แต่เจอปัญหาเมื่อใส่ Event overlayClick แล้ว สามารถแสดง title ได้ถูกต้อง ตรงกับที่กำหนดไว้ใน Marker แต่ location กับ popup แสดง ไม่ถูกต้องครับ 

ไปแสดง location กับ popup ของ marker อันสุดท้ายแทน 

ต้องทำอย่างไรครับ 

 


var map;
var marker_list = {};
var pos = { lon:98.117922, lat:8.611605 };


var marker_opt = {
icon: {
html: '',
},
visibleRange: { min: 11, max: 20 },
clickable: true,
draggable: false,
weight: longdo.OverlayWeight.Top
};
map = new longdo.Map({
placeholder: document.getElementById('map')
});

map.location( pos, true);
map.zoomRange({ min:8, max:20 });
//map.Ui.Mouse.enableWheel(false);
map.Ui.Geolocation.visible(false);
map.Ui.Toolbar.visible(false);
map.Ui.Fullscreen.visible(false);
map.Ui.Crosshair.visible(false);

map.Event.bind('ready', function() {
marker_list = {};
for(var i=1;i<=5;++i) getMarker(i);

map.Event.bind('overlayClick', function(e) {
var id = e.element().title.split(':').pop();
if(marker_list[id]){
console.log(e.element().title, e.location())
}
});

}); 
 
 
function getMarker(no, option){
option = option || {};
var is_focus = option.focus || false;
marker_pos = option.pos || pos;
if(!option.pos){
marker_pos.lon *= 1;
marker_pos.lat *= 1;

marker_pos.lon -= Math.random()/100;
marker_pos.lat -= Math.random()/100;
}

var this_opt = marker_opt;
this_opt.title = 'marker:'+no;
this_opt.icon.html = '<img src="images/dot-'+(is_focus?'green':'red')+'.png" width="8" height="8"/>';

marker_list[no] = new longdo.Marker( marker_pos, this_opt );
console.log(no, marker_pos)

map.Overlays.add( marker_list[no] );