Facebook Pixel Code
GoMap XƏRITƏ
PARTNYORLAR
asan xidmət
aerotur
asan kadr
azərbaycan respublikası mədəniyyət nazirliyi
azea construction
azərpoçt
dövlət imtahan mərkəzi
elektron hökümət portalı
qafqaz müsəlmanları idarəsi
iteca
kimi
bakı 2017 islam həmrəyliyi oyunları
icbari sığorta bürosunu
baku city circuit
qafqaz hazırlıq kursları
mərkəzi seçki komissiyası
baku shopping festival
metropark
bakı 2015 avropa oyunları
satgroup
sinam
taxilider
Nümunə: Xəritə üzərində çoxlu marker və məlumat “Buludu”

Versiya 0.1, 11 fevral 2015-ci il.

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; jvar 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) {
}
});

Hazır işlək nümunəyə bu linkdən baxmaq olar.