Показать всплывающее окно с отметкой маркера в openlayers 3

Ниже приведен мой код. Это нормально работает, но я хочу знать, как указать всплывающее окно onClick маркера? Содержимое в маркере я хочу показать динамическое получение из базы данных mysql с помощью php, но пока я хочу знать, как давать разные всплывающие окна для каждого маркера здесь?Показать всплывающее окно с отметкой маркера в openlayers 3

<div id="mapdiv"></div> 

<script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
<script> 
map = new OpenLayers.Map("mapdiv"); 
map.addLayer(new OpenLayers.Layer.OSM()); 

epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection 
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator) 

var lonLat = new OpenLayers.LonLat(13.0161, 22.2845).transform(epsg4326, projectTo); 

var markers = new OpenLayers.Layer.Markers("Markers"); 
map.addLayer(markers); 
var cmark = [13.0161, 22.2845]; 
markers.addMarker(new OpenLayers.Marker(lonLat));  

var zoom=8; 
map.setCenter (lonLat, zoom); 

var vectorLayer = new OpenLayers.Layer.Vector("Overlay"); 

// Define an array. This could be done in a seperate js file. 
// This tidy formatted section could even be generated by a server-side script (jsonp) 
var markers = [ 
    [ 73.0161, 26.2845 ], 
    [ -0.1244324, 51.5006728 ], 
    [ -0.119623, 51.503308 ] 
]; 

//Loop through the markers array 
for (var i=0; i<markers.length; i++) { 

    var lon = markers[i][0]; 
    var lat = markers[i][1]; 

    var feature = new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo), 
      {description: "marker number " + i} , 
      {externalGraphic: 'marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 } 
     );    
    vectorLayer.addFeatures(feature); 
}       
map.addLayer(vectorLayer); 
</script>

источник

2016-07-16 Web7

Ваш код не является открывателем 3. Если вам нужно, я могу опубликовать рабочее решение для openlayers 3. – x82

хорошо, что вы можете. Но я хочу показать несколько маркеров и их соответствующее всплывающее окно, которое будет получено из моего php-кода. Отдельное всплывающее окно для каждого маркера. – Web7

Я могу только направить вас к тому, как это сделать (прошло некоторое время с тех пор, как я использовал openlayers2). Во-первых, вам нужно поймать событие выбора маркера (функции). Для этого вам нужно добавить компонент на свою карту. После того, как вы поймаете событие, вы должны различать свои типы объектов, используя один из его свойств. Этот fullley зависит от вашей логики приложения. Затем вы можете отправить ключ MarkerType на свою php-страницу, вернуть частичный html, специфичный для этого типа маркера, вставить его в всплывающий шаблон и показать всплывающее окно. Проверить примеры OpenLayers 2. – x82

добавить всплывающее окно в OpenLayers 2:

popup = new OpenLayers.Popup("yourPopupID", 
       new OpenLayers.LonLat(lon,lat),//could be fetched from a DB 
       new OpenLayers.Size(200,200), 
       "yourDescription",//could be fetched from DB 
       true); 

map.addPopup(popup);

теперь это достаточно для примера кода, который вы указали в вопросе, вы можете получить ваши данные из datbase с помощью вызова AJAX для скрипт php, который будет выполнять работу

источник

2016-07-19 13:35:22

Показать всплывающее окно с отметкой маркера в openlayers 3

ответ

Смежные вопросы