오픈 레이어에 개별 프레임 팝업으로 여러 마커를 표시하는 방법은 무엇입니까?

여러 마커를 표시하고 각 마커를 클릭하면 사용자 정의 데이터로 프레임 팝업 팝업을 열어야합니다.오픈 레이어에 개별 프레임 팝업으로 여러 마커를 표시하는 방법은 무엇입니까?

마커를 클릭 할 때 열린 프레임 크라우드 팝업에 관한 자습서를 찾을 수 없습니다.

이에 대한 좀 도와주세요.

출처

2012-03-27 Ramesh Kotha

마커 대신 포인트 피처 + SelectFeature 컨트롤을 사용하십시오. – drnextgis

내 말 좀 들어주세요. –

http://openlayers.org/dev /examples/select-feature-openpopup.html – drnextgis

이 링크 is helpful. 그것에서 나는 데모로이 코드 생성 :.

<html> 
<head> 
    <script src="http://openlayers.org/dev/OpenLayers.js"></script> 
    <script type="text/javascript"> 
     var map, mappingLayer, vectorLayer, selectMarkerControl, selectedFeature; 

     function onFeatureSelect(feature) { 
      selectedFeature = feature; 
      popup = new OpenLayers.Popup.FramedCloud("tempId", feature.geometry.getBounds().getCenterLonLat(), 
            null, 
            selectedFeature.attributes.salutation + " from Lat:" + selectedFeature.attributes.Lat + " Lon:" + selectedFeature.attributes.Lon, 
            null, true); 
      feature.popup = popup; 
      map.addPopup(popup); 
     } 

     function onFeatureUnselect(feature) { 
      map.removePopup(feature.popup); 
      feature.popup.destroy(); 
      feature.popup = null; 
     } 

     function init(){ 
      map = new OpenLayers.Map('map'); 
      mappingLayer = new OpenLayers.Layer.OSM("Simple OSM Map"); 

      map.addLayer(mappingLayer); 
      vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {projection: "EPSG:4326"}); 
      selectMarkerControl = new OpenLayers.Control.SelectFeature(vectorLayer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); 
      map.addControl(selectMarkerControl); 

      selectMarkerControl.activate(); 
      map.addLayer(vectorLayer); 
      map.setCenter(
       new OpenLayers.LonLat(0, 0).transform(
        new OpenLayers.Projection("EPSG:4326"), 
        map.getProjectionObject()) 

       , 1 
      );  
     } 

     function placeRandomMarker(){ 
      var randomLat = Math.floor((Math.random()*180)-90); 
      var randomLon = Math.floor((Math.random()*180)-90); 
      var randomLonLat = new OpenLayers.Geometry.Point(randomLon, randomLat); 
      randomLonLat.transform("EPSG:4326", map.getProjectionObject()); 
      var randomFeature = new OpenLayers.Feature.Vector(randomLonLat, 
            { salutation: "hello world", Lon : randomLon, Lat : randomLat}); 
      vectorLayer.addFeatures(randomFeature); 
      var popup = new OpenLayers.Popup.FramedCloud("tempId", new OpenLayers.LonLat(randomLon, randomLat).transform("EPSG:4326", map.getProjectionObject()), 
         null, 
         randomFeature.attributes.salutation + " from Lat:" + randomFeature.attributes.Lat + " Lon:" + randomFeature.attributes.Lon, 
         null, true); 
      randomFeature.popup = popup; 
      map.addPopup(popup); 
     } 


    </script> 


</head> 
<body onload="init()"> 

<div id="map" style="height:600px; width: 1000px;"></div> 
<button onclick="placeRandomMarker()">Place Marker</button> 
</body> 
</html>

그것은 당신이 custom shapes 또는 graphic markers를 사용하여이 될 수있는 스타일의지도 스타일을 수있는 점을 (배치하기위한 벡터 레이어를 가지고 호출하는 벡터 층은 SelectFeature Control를 연결했다 코드에 FramedCloud popups을 추가하려면

출처

2012-03-30 19:01:26 AlexC

처음 발견 한 유용한 예! Thx 많이 있습니다. ! – LaurentG

오픈 레이어에 개별 프레임 팝업으로 여러 마커를 표시하는 방법은 무엇입니까?

답변

관련 문제