проблема с popup openlayers

Mapserver, GeoServer, MapGuide, Google и другое ПО для веб-картографии
Ответить
Андрей Щ
Новоприбывший
Сообщения: 13
Зарегистрирован: 16 май 2013, 15:32
Репутация: 0

проблема с popup openlayers

Сообщение Андрей Щ »

всем привет! на карте я проставил маркеры(координаты из бд берутся), как сделать чтоб при нажатии на маркер..выходило всплывающее сообщение? и при этом если оно вышло я его могу закрыть при нажатии на любую область карты.

Код: Выделить всё

 markers = new OpenLayers.Layer.Markers("Marcadores");
        map.addLayer(markers);

        if (b == 2) 
        {           
                
                //=================  =========стили для маркеров и тут хранятся координаты
                var size = new OpenLayers.Size(30, 30);
                var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
                
                var location = new OpenLayers.LonLat(kor_1, kor_2).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                var icon = new OpenLayers.Icon('http://icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Ball-Pink-icon.png', size, offset);
                markers.addMarker(new OpenLayers.Marker(location, icon.clone()));
        }


    }
Андрей Щ
Новоприбывший
Сообщения: 13
Зарегистрирован: 16 май 2013, 15:32
Репутация: 0

Re: проблема с popup openlayers

Сообщение Андрей Щ »

изменил код...теперь popup при нажатии на маркер выходит в левом верхнем углу карты....как сделать чтоб popup появлялся возле маркера?

Код: Выделить всё

markers = new OpenLayers.Layer.Markers("Marcadores");
        map.addLayer(markers);

        if (b == 2) 
        {           
                
                //=================  =========стили для маркеров и тут хранятся координаты
                var size = new OpenLayers.Size(30, 30);
                var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
                
                var location = new OpenLayers.LonLat(kor_1, kor_2).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                var icon = new OpenLayers.Icon('http://icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Ball-Pink-icon.png', size, offset);
                markers.addMarker(new OpenLayers.Marker(location, icon.clone()));

              
                //markers.events.register("click", marker, function() {
                //    alert('ok');
            //});     
 
                markers.events.register("click", markers, function(e){
                    popup = new OpenLayers.Popup("chicken",
                                    map.getLonLatFromPixel(e.x),
                                    new OpenLayers.Size(200,200),
                                    "example popup",
                                    true);

                    map.addPopup(popup);
                    }); 
                        

        }
novice
Гуру
Сообщения: 527
Зарегистрирован: 21 окт 2012, 00:17
Репутация: 15
Ваше звание: developer

Re: проблема с popup openlayers

Сообщение novice »

Почему бы не воспользоваться кодом, который есть в документации OpenLayers?

Код: Выделить всё

        function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {

            var feature = new OpenLayers.Feature(markers, ll); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";

            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);

            markers.addMarker(marker);
            
        }
Вызов

Код: Выделить всё

       	markers = new OpenLayers.Layer.Markers("Маркеры");
       	markers.id = "Markers";
       	map.addLayer(markers);

        ll;//ваши координаты
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<div style="background-color:white; font-family:Arial; font-style:italic " >' + strTest.toString() + '</div>';
        addMarker(ll, popupClass, popupContentHTML, true);
Кроме того гораздо проще использовать Vector
Андрей Щ
Новоприбывший
Сообщения: 13
Зарегистрирован: 16 май 2013, 15:32
Репутация: 0

Re: проблема с popup openlayers

Сообщение Андрей Щ »

в свой код вставлял..не работает т.е. не отображаются маркеры(свои маркеры вернее свой способ добавления маркера с попуп закомментил)..в чем дело хз..может кто подскажет..
вот мой код..

Код: Выделить всё

<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
 body, #basicMap {
      width: 828px;
      height: 698px;
      margin: 10px;
      float: left;
 }
 html {
      font-size: 10px;
      bottom: 10px;
      right: 10px;
 }

</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script>

    var map;
    var markers;


    function ejecutar() {
        init(3);
        //loadMarkers();
    }
    function init(b,kor_1,kor_2) {
        if (b == 3) {


              map = new OpenLayers.Map("basicMap", {
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 2,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            });
        }
        // Define the map layer
        // Here we use a predefined layer that will be kept up to date with URL changes
        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("MapaCiudad");
        map.addLayer(layerMapnik);
        var lonLat = new OpenLayers.LonLat(50.5206298828125, 55.15881723298661).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        //map.setCenter(new OpenLayers.LonLat(-3.862788677215576, 43.4669443349282) // Center of the map
        map.zoomTo(9);
        map.setCenter(lonLat, 19);
var lineLayer = new OpenLayers.Layer.Vector("Линии"); 
        map.addLayer(lineLayer);                    
        map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
   
        var points = new Array(
           new OpenLayers.Geometry.Point(37.61556, 55.75222),
           new OpenLayers.Geometry.Point(45, 33),
           new OpenLayers.Geometry.Point(49, 35),
           new OpenLayers.Geometry.Point(45, 56),
           new OpenLayers.Geometry.Point(49, 87)
        );


        var line = new OpenLayers.Geometry.LineString(points);
        line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

        var style = { 
            strokeColor: '#0000ff', 
            strokeOpacity: 0.5,
            strokeWidth: 5
        };

        var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
        lineLayer.addFeatures([lineFeature]);

  markers = new OpenLayers.Layer.Markers("zibo", {isBaseLayer: true});
        map.addLayer(markers);
        addMarkers();
        alert('ok');
       
        
            
        function addMarkers() {

            var ll, popupClass, popupContentHTML;

            //anchored bubble popup small contents autosize closebox
            ll = new OpenLayers.LonLat(-35,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = "<div>This popup can't be panned to fit in view, so its popup text should fit inside the map. If it doens't, instead of expaning outside, it will simply make the content scroll. Scroll scroll scroll your boat, gently down the stream! Chicken chicken says the popup text is really boring to write. Did you ever see a popup a popup a popup did you ever see a popup a popup right now. With this way and that way and this way and that way did you ever see a popup a popup right now. I wonder if this is long enough. it might be, but maybe i should throw in some other content. <ul><li>one</li><li>two</li><li>three</li><li>four</li></ul>(get your booty on the floor) </div>";
            addMarker(ll, popupClass, popupContentHTML, true, true);
 

        }


        function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {

            var feature = new OpenLayers.Feature(markers, ll); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";
                    
            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                    this.popup.updateSize();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);

            markers.addMarker(marker);
        }

</script>
</head>
<body onload="ejecutar();">
    <script type="text/javascript">        
       
        function add_metka()
        {
            function dobavit(koor1, koor2)
            {
                
                init(2,koor1,koor2);
            }
            

        @foreach (Дорожное_строительство.Models.koordinats_piket picket  in ViewBag.Data)
        {
        <text>
            dobavit(@picket.Dolgota,@picket.Shirota);       
        </text>
        }
        
        }
        
        setTimeout('add_metka()', 6000)
    </script>
<div id="basicMap" ></div>        
    
</body>
Ответить

Вернуться в «Веб-картография»

Кто сейчас на конференции

Сейчас этот форум просматривают: Bing [Bot] и 2 гостя