0

HTML フォームの post メソッドを使用して、ページを書き込む perl ファイルにユーザー入力要求を送り返しています。私の質問は、青い背景の部分にある緯度と経度の検索ボックスに関するものです。この例のコードをマップに追加して、クリック イベントでマウス クリックの緯度/経度が点滅する関数を導入しました。

この機能をフォームに統合する方法はありますか? できるだろうか

a) この機能のオンとオフを切り替えるフォームのボタンを追加しますか? (すべてのクリックでデータベースが検索されるわけではありません)

と

b) post メソッド、または同様のものを使用して、クリックから得られた座標を perl ファイルに送り返しますか?

これは関連する javacript です。

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, 
{
    defaultHandlerOptions: 
    {
        'single': true,
        'double': false,
        'pixelTolerance': 0,
        'stopSingle': false,
        'stopDouble': false
    },
    initialize: function(options) 
    {
        this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
        OpenLayers.Control.prototype.initialize.apply(this, arguments); 
        this.handler = new OpenLayers.Handler.Click(this, 
        {
            'click': this.trigger
        }
        , this.handlerOptions);
    }, 
    trigger: function(e) 
    {
        var lonlat = map.getLonLatFromPixel(e.xy);
        alert("You clicked near " + lonlat.lat + " N, " +
                                  + lonlat.lon + " E");
    }
});

次に、マップの初期化で私も使用します

var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();

htmlフォームは次のようになります。

<form action='maps7.pl' method='post'>
    Latitude: <input type="float" name="lat"><br>
    Longitude: <input type="float" name="long"><br>
    <INPUT TYPE="submit" VALUE="What maps are here?"><br>
    OR<br>
    Place Name: <input type="text" name="place"><br><br>
</form>

現在、 を使用してクエリ結果を実行しperl dbi、このコードを使用して変数として保存しています。

$cgi = new CGI;

for $key ($cgi->param()) 
{
    $input{$key} = $cgi->param($key);
}

$searchseries = $input{series};
$slat = $input{lat};
$slong = $input{long};

したがって、必要に応じて、関数を新しい変数として変更または形成できるようにしたいと考えています$slat。$slong

4

1 に答える 1

0

JavaScript を介して緯度と経度を取得し、フォーム入力の値属性を設定する必要があります。各入力に id を設定して、JavaScript で選択できるようにします。jQueryまたはプレーン JS を使用してそれを実現できます。理想的には、ユーザーが座標を手動で、またはマウス クリックで入力できるようにする必要があります。クリックした位置にマーカーを描画して、視覚的なフィードバックを提供することも役立ちます。

于 2013-07-12T08:41:57.293 に答える