마커에 팝업 표시 openlayers에서 클릭하십시오. 3

아래 코드는 제 코드입니다. 이것은 잘 작동하지만 팝업을 제공하는 방법을 알고 싶습니다 onClick of? 마커의 내용은 PHP를 사용하여 mysql 데이터베이스에서 동적으로 가져 오는 것을 보여주고 싶지만, 지금은 각 마커마다 다른 팝업을주는 방법을 알고 싶습니다.마커에 팝업 표시 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

귀하의 코드는 openlayers 3되지 않습니다. 필요한 경우 openlayers 3에 대한 작업 솔루션을 게시 할 수 있습니다. – x82

가능합니다. 하지만 여러 마커와 각각의 PHP 코드에서 오는 팝업을 보여주고 싶습니다. 각 마커에 대한 별도의 팝업. – Web7

나는 그것을 수행하는 방법에 대해서만 지시 할 수 있습니다 (openlayers2를 사용한 이후로 얼마간의 시간이 걸렸습니다). 먼저 마커 (피쳐)의 select 이벤트를 catch해야합니다. 이를 위해지도에 구성 요소를 추가해야합니다. 이벤트를 잡은 후에는 속성 중 하나를 사용하여 지형지 물 유형을 구별해야합니다. 이 completeley는 응용 프로그램 로직에 따라 다릅니다. 그러면 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);

을 지금, 당신이 AJAX 호출에를 사용하여 DATBASE에서 데이터를 검색 할 수 있습니다 당신은 당신의 질문에 제공된 코드의 예를 들어 충분하다 그 일을 할 PHP 스크립트

출처

2016-07-19 13:35:22

마커에 팝업 표시 openlayers에서 클릭하십시오. 3

답변

관련 문제