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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

1回答

6607閲覧

Leafletでポップアップの中のリンクをクリックした時に情報をクリップボードに格納したい

seira404

総合スコア9

JavaScript

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

0グッド

0クリップ

投稿2017/06/20 06:53

編集2017/06/20 07:08

###前提・実現したいこと
Leafletとmarkerclusterで複数のマーカーを表示して、マーカーをクリックした時に名前と住所をポップアップ表示させています。このポップアップの中にリンクを追加して、リンク文字をクリックしたときに、情報をクリップボードに格納したいと思っています。

###発生している問題
下記のソースコードで実行すると、クリップボードに格納されるのは別ファイルで保存しているマーカー情報の一番最後のものになってしまします。
var result = window.clipboardData.setData( 'Text', name );の位置と書き方が原因だとは思うのですが、これをどのように書き換えれば良いのかわかりません。
よろしくお願い致します。

###該当のソースコード

JavaScript

1for (var i = 0; i < addressPoints. length; i++) { 2 var a = addressPoints[i]; 3 var name = a[2]; 4 var address = a[3]; 5 var marker = L.marker(L.latLng(a[0], a[1]), { title: name }); 6 7 marker.bindPopup('<b>' + name + '</b>' + '<br/>' + address + '<br/>' + '<a href="URL">save</a>'); 8 var result = window.clipboardData.setData( 'Text', name ); 9 markers.addLayer(marker); 10} 11 12map.addLayer(markers);

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/06/20 06:59

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
seira404

2017/06/20 07:30

コードブロックで囲みました。よろしくお願い致します。
guest

回答1

0

ベストアンサー

ポップアップ内のクリックイベントはLeafletと関係なく付けた方がうまくいく気がします。

JavaScript

1// 未テスト 2var i, a, name, marker; 3for ( i = 0; i < addressPoints. length; i++ ) { 4 a = addressPoints[i]; 5 name = a[2]; 6 address = a[3]; 7 marker = L.marker( L.latLng( a[0], a[1] ), { title: name } ); 8 marker.bindPopup( '<b>' + name + '</b>' + '<br/>' + address + '<br/>' + '<a href="URL" class="hoge" data-name="name">save</a>' ); 9 markers.addLayer( marker ); 10} 11map.addLayer( markers ); 12document.addEventListener( 'click', function ( e ) { 13 if ( e.target.className === 'hoge' ) { 14 window.clipboardData.setData( 'Text', e.target.dataset.name ); 15 } 16} );

【HTMLElement.dataset - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/dataset

投稿2017/06/20 18:05

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

seira404

2017/06/21 03:25

ご回答いただきありがとうございます。 試してみたのですが、クリップボードに何も格納されません。 クリップボードではなくアラート表示にしたらどうなるか window.clipboardData.setData( 'Text', e.target.dataset.name );を alert( e.target.dataset.name );にしてみたところ、nameとアラート表示されました。 クリックしたマーカー情報を取得するにはどう修正したら良いのでしょうか。 よろしくお願いいたします。
seira404

2017/06/21 05:07

e.clipboardData.setData( 'text/plain', e.target.dataset.name );だとChromeでもIEでも何も格納されませんでした。 window.clipboardData.setData( 'Text', e.target.dataset.name );はIE独自仕様だったのですね。Chromeでテストしてしまいました。IEだとnameと格納されました。 使用するのはIEです。私のテストの仕方が間違っていました。大変失礼いたしました。 <a href="URL" class="hoge" data-name="name">の"name"を”address”にすると、 addressの文字が格納されます。
kei344

2017/06/21 05:38

'<a href="URL" class="hoge" data-name="' + name + '">save</a>' 上記のようにすればとりあえず値は取れると思います。
seira404

2017/06/21 07:07

格納できました。 ポップアップを出さずにマーカーをクリックした時点で格納することも検討しています。 どうにもうまくいかないときは、また質問させていただきますのでよろしくお願い致します。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問