1

現在のセットアップで framecloud タイプのポップアップを使用する方法を探しています。残念ながら、私の試みはすべてうまくいかなかったか、最近配置されたメーカーでしかうまくいきません.

それを機能させる過程で、元のスクリプトをマーカーの使用からベクターの使用に変換して、マーカー ポイントを配置しました (マーカーよりもベクターをカスタマイズする方が簡単であることがわかりました)。

今、私が仕事に取り掛かることができるものはどれでも使用しますが、これに数日間取り組んだ後、私は機知に富み、正しい方向への助けが必要です.

私のポイントは、tabletop.js を使用して Google スプレッドシートから取得されます。この機能は、私が「タイプ」と呼んだフィールドに基づいて、マーカーがそれぞれのレイヤーに配置されているので、私が望むように機能しています。マーカー タイプ レイヤーの問題の原因である可能性があると感じていますが、それを修正する方法がわかりません。

これらのページからコーディングを表示できます

(場所が変わったため、リンクを削除しました。)

事前にご協力いただきありがとうございます。

4

1 に答える 1

1

I finally got it to work. For anyone in a similar situation here's my final code for the layers. I did change the names of the layers from what they are originally and blacked out the spreadsheet I used, but the changes should be noticeable.

//
//// Set 'Markers'
//
            var iconMarker = {externalGraphic: 'http://www.openlayers.org/dev/img/marker.png', graphicHeight: 21, graphicWidth: 16};
            var iconGeo = {externalGraphic: './images/fortress.jpg', graphicHeight: 25, graphicWidth: 25};
            var iconAero = {externalGraphic: './images/aeropolae.jpg', graphicHeight: 25, graphicWidth: 25}; // Image is the creation of DriveByArtist: http://drivebyartist.deviantart.com/

            var vector1 = new OpenLayers.Layer.Vector("1");
            var vector2 = new OpenLayers.Layer.Vector("2");
            var vector3 = new OpenLayers.Layer.Vector("3");


// Pulls map info from Spreadsheet
//*
        Tabletop.init({
          key: 'http://xxxxxxxxxx', //Spreadsheet URL goes here
          callback: function(data, tabletop) { 
            var i,
                dataLength = data.length;

            for (i=0; i<dataLength; i++) { //following are variables from the spreadsheet
                locName = data[i].name;
                locLon = data[i].long;
                locLat = data[i].lat;
                locInfo = data[i].info;
                locType = data[i].type; // Contains the following string in the cell, which provides a pre-determined output based on provided information in the spreadsheet: =ARRAYFORMULA("<h2>"&B2:B&"</h2><b>"&G2:G&"</b><br /> "&C2:C&", "&D2:D&"<br />"&E2:E&if(ISTEXT(F2:F),"<br /><a target='_blank' href='"&F2:F&"'>Read More...</a>",""))

                locLonLat= new OpenLayers.Geometry.Point(locLon, locLat);

               switch(locType)
                {
                case "Geopolae":
                     feature = new OpenLayers.Feature.Vector(
                     locLonLat,
                     {description:locInfo},
                     iconGeo);
                    vector1.addFeatures(feature);        
                  break;
                case "POI":
                  feature = new OpenLayers.Feature.Vector(
                     locLonLat,
                     {description:locInfo},
                     iconMarker);
                    vector2.addFeatures(feature);             
                  break;
                case "Aeropolae":
                  feature = new OpenLayers.Feature.Vector(
                     locLonLat,
                     {description:locInfo},
                     iconAero);
                    vector3.addFeatures(feature);             
                  break;  
                }

              }
          },
          simpleSheet: true 
        });             

            map.addLayers([vector1, vector2, vector3]);

            map.addControl(new OpenLayers.Control.LayerSwitcher());

        //Add a selector control to the vectorLayer with popup functions
        var controls = {
          selector: new OpenLayers.Control.SelectFeature(Array(vector1, vector2, vector3), { onSelect: createPopup, onUnselect: destroyPopup })
        };

        function createPopup(feature) {
          feature.popup = new OpenLayers.Popup.FramedCloud("pop",
              feature.geometry.getBounds().getCenterLonLat(),
              null,
              '<div class="markerContent">'+feature.attributes.description+'</div>',
              null,
              true,
              function() { controls['selector'].unselectAll(); }
          );
          feature.popup.autoSize = true;
          feature.popup.minSize = new OpenLayers.Size(400,100);
          feature.popup.maxSize = new OpenLayers.Size(400,800);
          feature.popup.fixedRelativePosition = true;
          feature.popup.overflow ="auto";
          //feature.popup.closeOnMove = true;
          map.addPopup(feature.popup);
        }

        function destroyPopup(feature) {
          feature.popup.destroy();
          feature.popup = null;
        }

        map.addControl(controls['selector']);
        controls['selector'].activate();

        }
于 2013-06-19T04:10:48.317 に答える