Facebook Pixel Code
GoMap КАРТА
Пример: Множество маркеров и информативное облако

Версия 0.1 от 11 февраль 2015 г.

В первом примере были рассмотрены подключение картографического слоя - GoMap, а также установка маркера на карту. Теперь мы рассмотрим как установить на карте множество маркеров а также при нажатии выводить информацию в "облако".

Нам понадобится создать файл в котором будут содержаться координаты и описание объектов. Будем использовать структуру данный на основе JSON-документа.

Создадим файл markers.js в котором будет содержаться:

{
"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"
}
]
}

Где id – уникальный идентификационный номер обьекта; lat , lon – координаты обьекта; nm – название объекта; info – прочая информация которую будем отображать в "облаке".

Подключим библиотеку jQuery.

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

Теперь нужно установить на карту маркеры, мы это будем делаем как было описано в первом уроке. Опишем функцию loadMarkers() :

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();
});
}

Теперь опишем функцию mapShowArea() которая будет масштабировать карту в зоне видимости маркеров.

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

Теперь перейдем к создание информационного облака. Опишем функцию showPopup(flag) . Где параметр flag - это маркер.

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();
}

Далее вызываем эту функцию при клике на маркер.

sprintersLayer.events.on({
"featureselected": function(e) {
click.unselectAll();
map.panTo(e.feature.lonlat);
showPopup(e.feature);
},
"featureunselected": function(e) {
}
});

Готовый рабочий пример можно посмотреть пройдя по этой ссылке

Добавить объект