ตอนนี้กำลังทดลองทำโปรแกรมใส่ 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] );
}