function initialize(){
/*key=ABCDEFG Bạn phải thay ABCDEFG bằng key mà bạn đăng ký */
/*Create property cho map*/
var mapProp = {
center: new hcmmap.LatLng(10.8152328, 106.680505),
zoom: 10
};
/*Create map object with property(mapProp)*/
var map = new hcmmap.Map(document.getElementById("divMap"), mapProp);
var generateRandomNumber = function (min, max)
{
return Math.random() * (max - min) + min;
};
/*Create LayerMarkerCluster*/
var layerMarkerCluster = new hcmmap.LayerMarkerCluster(map);
/*Định nghĩa singleTemplate. Nếu không định nghĩa thì là giá trị mặc định*/
layerMarkerCluster.singleTemplate = function (marker)
{
return '<div style="position: absolute; left: 0px; top: 0px; width: 45px; height: 45px; border: 1px solid rgb(0, 0, 0); border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; opacity: 1; background-color: gray; "></div>';
};
/*Định nghĩa groupTemplate. Nếu không định nghĩa thì là giá trị mặc định*/
layerMarkerCluster.groupTemplate = function (index)
{
return '<div style="position: absolute; left: 0px; top: 0px; width: 45px; height: 45px; border: 1px solid rgb(0, 0, 0); border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; opacity: 1; background-color: white;"><p style="text-align:center;">' + index + '</p></div>';
};
/*Muốn bắt sự kiện cho các marker thay vì bắt từng sự kiện cho marker, nên bắt sự kiện trên layer này*/
/*LayerMarkerCluster hỗ trợ 3 sự kiện. click,mouseover,mouseout
Tất cả các sự kiện trên có hiệu lực khi mouse đang ở vị trí của marker mà nó quản lý trừ sự kiện mouseout
*/
hcmmap.event.addListener(layerMarkerCluster, 'click', function (param)
{
/*lấy marker group*/
var markerGroup = param.Obj;
/*Truy xuất các marker thuộc markerGroup*/
for (var key in markerGroup.listId)
{
var item = markerGroup.listId[key];
}
});
var mbr = map.getBoundMap().getMBR();
var icon = new hcmmap.Icon({ size: new hcmmap.Size(48, 48), anchor: new hcmmap.Point(24, 24) });
for (var i = 0; i < 1000; i++)
{
var latlng = new hcmmap.LatLng(generateRandomNumber(mbr[1], mbr[3]), generateRandomNumber(mbr[0], mbr[2]));
var marker = new hcmmap.CustomMarker({ position: latlng, icon: icon, content: '' });
layerMarkerCluster.insert(marker);
}
}
/*Khởi động map sau khi page load xong*/
hcmmap.event.addDomListener(window, 'load', initialize);