質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20334questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Leaflet.jsでマーカーをaタグで呼び出しポップアップしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,172

TJMYK

score 50

実現したいこと

こちらソースコードのように、リンクをクリックすると、ポップアップが開くような実装をしたいと思っています。
実際にどのようなソースコードになるのか、ご指導頂ければと存じます。

現状

GeoJsonを外出ししており、取得は以下のコードで実施しています。
現在は、地図は正しく表示され、ピンは、正しく立っております。

以下は、おそらく修正するべきところと思われる該当箇所の抜粋です

    $.getJSON("/geo_json").done(function(data){
        var geojson = L.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup("テスト");
            }
        });
        geojson.addTo(map);
    });

以下はソースコードの全体です

    DEF_LAT = 34.000000;
    DEF_LNG = 135.000000;

    var map = L.map('map').setView([DEF_LAT ,DEF_LNG], 10);

    // 現在地を中央にする
    //map.locate({setView: true, maxZoom: 15});

    // OSMタイル
    var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    tileLayer.addTo(map);

    $.getJSON("/geo_json").done(function(data){
        var geojson = L.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup("テスト");
            }
        });
        geojson.addTo(map);
    });

やってみたこと

リンク先のソースコード自体は、動かすことができましたが、現状のソースコードに置き換えて試行錯誤しましたが、できませんでした。

どうぞ、よろしくお願い申し上げます。

 2016/12/22 14:05追記

    var markers = [];
    $.getJSON("/geo_json").done(function(data){
        var geojson = L.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup('テスト');
                markers.push(layer);  // 追加
            }
        });
        geojson.addTo(map);

        function markerFunction(id){
            for (var i in markers){
                var markerID = markers[i].options.title;
                if (markerID == id){
                    markers[i].openPopup();
                }
            }
        }

        $("a").click(function(){
            markerFunction($(this)[0].id);
        });

    });
    <a id="marker_1" href="#">Marker 1</a><br>
    <a id="marker_2" href="#">Marker 2</a><br>
    <a id="marker_3" href="#">Marker 3</a>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

onEachFeature 内で markers.push(layer); してリンク先のように処理してみればよいのでは?


追記:

var markers = [];
$.getJSON( "/geo_json" ).done( function( data ) {
    var geojson = L.geoJson( data, {
        onEachFeature: function ( feature, layer ) {
            layer.bindPopup( feature.properties.popupContent );
        },
        pointToLayer: function (feature, latlng) {
            var m = L.marker( latlng, { title : feature.properties.popupContent } );
            markers.push( m );
            return m;
        }
    });
    geojson.addTo( map );

    function markerFunction( id ) {
        for ( var i in markers ) {
            var markerID = markers[i].options.title;
            if ( markerID == id ) {
                markers[i].openPopup();
            }
        }
    }
    $("a").click(function(){
        markerFunction( $( this )[0].id );
    });

});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/22 14:07

    kei344様
    2016/12/22 14:05追記のようなソースコードを書いてみましたが、
    動作しませんでした。

    大変申し訳無いのですが、具体的にどうすれば良いのか、ソースコードなどお教えいただければ幸いです。

    キャンセル

  • 2016/12/22 15:10

    layerにmarkerが入っていると勘違いしていました、すいません。
    とりあえず他の方のサンプルを改変して試したところ動いたので、後で追記しておきます。
    http://jsfiddle.net/0xy5w14c/

    キャンセル

  • 2016/12/22 21:23

    kei344様
    遅くなりました。
    ソースコード本当にありがとうございます。
    無事動作致しました。
    いつもありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20334questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。