Servisin adı Xəritəyə bir neçə markerin əlavə edilməsi
Servisin təsviri Bu servis vasitəsilə xəritə üzərinə bir neçə markerin qoyulması və üzərinə klik etdikdə məlumat “Buludu”nun çıxarılması mümkündür.
Təqdim edən qurum Mədəniyyət və Turizm Nazirliyi
Kateqoriya Nəqliyyat və kommunikasiya Mədəniyyət və istirahət
Açar sözlər icazə qeydiyyat
Yaranma tarixi 21.07.2015
Yenilənmə tarixi 21.07.2015
API Nümunə İstifadə məlumatları
Nümunə 1.-də GoMap.Az saytının xəritəsi olan layın qoşulması və xəritə üzərinə marker yerləşdirilməsi verilmişdir. İndi isə xəritə üzərinə bir neçə markerin qoyulması və üzərinə klik etdikdə məlumat “Buludu”nun çıxarılması funksionalının qoşulması üçün nümunəni veririk. Bunun üçün obyektlərin kordinatları və onlar haqda məlumat olan fayl yaratmaq lazımıdır. JSON-document əsasında tərtib olunmuş verilənlər strukturundan istifadə edəcəyik. 

Aşağıdakı verilənləri özündə saxlayan markers.js faylını yaradaq: 


"markers": [
{
"id": "1",
"lat": "40.378729",
"lon": "49.851327",
"nm": "Marker 1",
"info": "Info for Marker 1"
},
{
"id": "2",
"lat": "40.3689631",
"lon": "49.8376389",
"nm": "Marker 2",
"info": "Info for Marker 2"
},
{
"id": "3",
"lat": "40.3736876",
"lon": "49.8153014",
"nm": "Marker 3",
"info": "Info for Marker 3"
}

}



Burada id – obyektin unikal identifikasiya nömrəsi; lat, lon – obyektin kordinatları; nm – obyektin adı; info – obyekt haqda onun məlumat “Buludu”nda veriləcək informasiy.jQuery kitabxanasını qoşaq. 

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 

İndi isə markerləri xəritə üzərinə yerləşdirmək lazımdır, biz bunu Nümunə 1-də göstərildiyi kimi edəcəyik. loadMarkers() funksiyasını yazaq: 

function loadMarkers(){
$.getJSON("markers.js", function (data) {
var i=0; 
$.each(data.markers, function () {
var lonlat = new OpenLayers.LonLat(this.lon, this.lat).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
); 


var flag = new OpenLayers.Feature.Vector(new 
OpenLayers.Geometry.Point(Math.floor(lonlat.lon), Math.floor(lonlat.lat)), { description: 'flag' }, defaultStyleMap); 
flag.fid = i++;
flag.x = lonlat.lon; 
flag.y = lonlat.lat; 
flag.lonlat = lonlat; 
flag.nm = this.nm; 
flag.info = this.info; 
sprintersLayer.addFeatures(flag); 
});
mapShowArea();
});
}


İndi də mapShowArea() funksiyasını yazaq, bu funksiya xəritəni markerlər görünən miqyasa qədər miqyaslayacaq. 

function mapShowArea(){
var features = sprintersLayer.features; 
if (features.length > 1){ 
var k=0; 
for(var j=0; j
var feature = features[j]; 
k++;
if (k==1){ 
xmin = feature.x; 
ymin = feature.y; 
xmax = feature.x; 
ymax = feature.y; 
}
if (feature.x < xmin) xmin = feature.x; 
if (feature.x > xmax) xmax = feature.x; 
if (feature.y < ymin) ymin = feature.y; 
if (feature.y > ymax) ymax = feature.y; 
}

var bounds = new OpenLayers.Bounds();
bounds.extend(new OpenLayers.LonLat(xmin, ymin)); 
bounds.extend(new OpenLayers.LonLat(xmax, ymax));map.zoomToExtent(bounds); 
}else if (features.length == 1){ 
var feature = sprintersLayer.features[0]; 
var lonlat = new OpenLayers.LonLat(feature.x, feature.y); 
map.setCenter(lonlat, 11); 
}
}


İndi isə məlumat “Buludu”nun yaradılmasına keçək. showPopup(flag) funksiyasını yazaq. Burada flag parametri markerdir. 
function showPopup (flag) {
if (Popup == undefined) {
Popup = new OpenLayers.Popup.FramedCloud("Info",
map.getCenter(),
new OpenLayers.Size(300, 200), 
flag.info, 
null, 
true, 
null); 

Popup.autoSize = true; 
Popup.fixedRelativePosition = true; 
PopuprelativePosition = "br";
Popup.panMapIfOutOfView = true; 
map.addPopup(Popup); 
}

Popup.hide();
if (flag.lonlat) {
Popup.lonlat = flag.lonlat; 
Popup.updatePosition();
}
Popup.setContentHTML(flag.info); 
Popup.updateSize();
Popup.show();
}

Marker üzərinə klik etdikdə bu funksiyanın çağırılır. 
sprintersLayer.events.on({
"featureselected": function(e) 
click.unselectAll();
map.panTo(e.feature.lonlat); 
showPopup(e.feature); 
},
"featureunselected": function(e) {
}
});