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

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

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

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

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

Q&A

解決済

1回答

798閲覧

photomapのポップアップを制御したい

shin0859

総合スコア15

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

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

0グッド

0クリップ

投稿2020/01/01 03:45

編集2020/01/03 08:58

前提・実現したいこと

 photoMapでpopupを制御したい

発生している問題・エラーメッセージ

http://turban.github.io/Leaflet.Photo/examples/norvegiana.html
https://github.com/turban/Leaflet.Photo
view-source:http://turban.github.io/Leaflet.Photo/examples/norvegiana.html
こちらのサイトを利用しています
下記の様に書き換えましたが、マ-カ-のポップアップが実行できません

### javascript 上記リンク先のコ-ド <!DOCTYPE html> <html> <head> <title>Leaflet Norvegiana</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta property="og:image" content="route.png" /> <link rel="stylesheet" href="lib/leaflet/leaflet.css" /> <link rel="stylesheet" href="lib/cluster/MarkerCluster.css" /> <link rel="stylesheet" href="../Leaflet.Photo.css" /> <link rel="stylesheet" href="css/map.css" /> </head> <body> <div id="map"></div> <script src="lib/reqwest.min.js"></script> <script src="lib/leaflet/leaflet.js"></script> <script src="lib/cluster/leaflet.markercluster.js"></script> <script src="../Leaflet.Photo.js"></script> <script> **→追加 var mymarker = [];** var map = L.map('map', { maxZoom: 17 }); L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=norges_grunnkart&zoom={z}&x={x}&y={y}', { attribution: '&copy; <a href="http://kartverket.no/">Kartverket</a>' }).addTo(map); var photoLayer = L.photo.cluster({ spiderfyDistanceMultiplier: 1.2 }).on('click', function (evt) { evt.layer.bindPopup(L.Util.template('<img src="{url}"/></a><p>{caption}</p>', evt.layer.photo), { className: 'leaflet-popup-photo', minWidth: 400 }).openPopup(); }); reqwest({ url: 'http://kulturnett2.delving.org/api/search?query=*%3A*&format=jsonp&rows=100&pt=59.936%2C10.76&d=1&qf=abm_contentProvider_text%3ADigitaltMuseum', type: 'jsonp', success: function (data) { var photos = []; data = data.result.items; for (var i = 0; i < data.length; i++) { var photo = data[i].item.fields; if (photo.abm_latLong) { var pos = photo.abm_latLong[0].split(','); **×photos.push({            〇photos = [{** lat: pos[0], lng: pos[1], url: photo.delving_thumbnail[0], caption: (photo.delving_description ? photo.delving_                                  description[0] : '') + ' - Kilde: <a href="' +                                  photo.delving_landingPage +                                  '">' + photo.delving_collection + '</a>', thumbnail: photo.delving_thumbnail[0] **×});  〇}];** }           **→追加 var mymarker[i] = photoLayer.add(photos).addTo(map);** }     **→削除 photoLayer.add(photos).addTo(map);** map.fitBounds(photoLayer.getBounds()); }      **→追加 mymarker[5].openPopup();** //6番目をポップアップしたい });

試したこと

上記コ-ドに修正しましたが、希望するポップアップは表示されません
どなたか ご教授ください

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

guest

回答1

0

自己解決

遅くないましたが 未解決のままとします

投稿2020/04/22 02:36

shin0859

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問