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.
.png?v=DqKtbngFu8-eBM77oNP77E2SV2gNF4_tUk0Y9IcK12s)
