Leaflet.jsを使って、webに地図を表示させて、複数の地点をマーキングすることができました。
それで、ここからポップアップを最初から表示されるようにしたいのですが、うまく行きません。
#実際のコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <link rel="stylesheet" href="main.css"> </head> <body class="container"> <header></header> <main> <div id="app"> <div id="map"></div> </div> </main> <footer></footer> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="main.js"></script> </body> </html>
javaScripot
1'use strict' 2 3{ 4 var map = L.map('map').setView([38.4316, 141.3094], 12); 5 6 var geojsonFeature = []; 7 var test_popupContents = ['sampleA', 'sampleB', 'sampleC', 'sampleD']; 8 var lat = [38.4316, 38.4306, 38.4299, 38.4327]; 9 var lon = [141.3094, 141.3076, 141.3070, 141.3087]; 10 11 var customClassName = ['.btn_SampleA', '.btn_SampleB', '.btn_SampleC', '.btn_SampleD']; 12 13 var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ 14 attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 15 maxZoom: 21 16 }); 17tileLayer.addTo(map); 18 19for (var i = 0; i < test_popupContents.length; i++) { 20 geojsonFeature.push({ 21 "type": "Feature", 22 "properties": { 23 "popupContent": test_popupContents[i], 24 "className": customClassName[i] 25 }, 26 "geometry": { 27 "type": "Point", 28 "coordinates": [lon[i], lat[i]] 29 }, 30 }); 31 32} 33 L.geoJson(geojsonFeature, 34 { 35 onEachFeature: function(feature, layer){ 36 if(feature.properties && feature.properties.popupContent){ 37 layer.bindPopup(feature.properties.popupContent, {className: feature.properties.className}); 38 } 39 } 40 }).addTo(map).openPopup(); 41 42}
##現状と質問
これで試してみますと、test_popupContents
のsampleA
のみが、webページが読み込まれた時に最初からポップアップが表示されています。
これを、すべてのtest_popupContents
の配列のすべてをopenPopup()
にするためにはどうしたらよいでしょうか?
##2/3 追記
いただいたコメントを参考に次のコードを書いてみました。
'use strict' { var map = L.map('map').setView([38.4316, 141.3094], 12); var geojsonFeature = []; var test_popupContents = ['sampleA', 'sampleB', 'sampleC', 'sampleD']; var lat = [38.4316, 38.4306, 38.4299, 38.4327]; var lon = [141.3094, 141.3076, 141.3070, 141.3087]; var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', maxZoom: 20, autoClose:false }); tileLayer.addTo(map); for (var i = 0; i < test_popupContents.length; i++) { geojsonFeature.push({ "type": "Feature", "properties": { "popupContent": test_popupContents[i], }, "geometry": { "type": "Point", "coordinates": [lon[i], lat[i]] }, }); } L.geoJson(geojsonFeature, { onEachFeature: function(feature, layer){ if(feature.properties && feature.properties.popupContent){ // layer.bindPopup(feature.properties.popupContent, {className: feature.properties.className}); layer.bindPopup(feature.properties.popupContent); geojsonFeature.push(layer); } }, pointToLayer: function (feature, latlng) { var m = L.marker( latlng, { title : feature.properties.popupContent } ); geojsonFeature.push( m ); return m; } }).addTo(map); function markerFunction( id ) { for ( var i in geojsonFeature ) { var geoJsonFeatureID = geojsonFeature[i].options.title; if ( geoJsonFeatureID == id ) { geojsonFeature[i].openPopup(); } } } markerFunction(); }
これでも、うまく行きません。
consoleには
main.js:52 Uncaught TypeError: Cannot read property 'title' of undefined
とでています。
###追記2
単純に開かせる方法で、試してみたのですがうまく行きませんでした。
'use strict' { var map = L.map('map').setView([38.4316, 141.3094], 12); var geojsonFeature = []; var test_popupContents = ['sampleA', 'sampleB', 'sampleC', 'sampleD']; var lat = [38.4316, 38.4306, 38.4299, 38.4327]; var lon = [141.3094, 141.3076, 141.3070, 141.3087]; var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', maxZoom: 20, autoClose:false }); tileLayer.addTo(map); for (var i = 0; i < test_popupContents.length; i++) { geojsonFeature.push({ "type": "Feature", "properties": { "popupContent": test_popupContents[i], }, "geometry": { "type": "Point", "coordinates": [lon[i], lat[i]] }, }); } L.geoJson(geojsonFeature, { onEachFeature: function(feature, layer){ if(feature.properties && feature.properties.popupContent){ // layer.bindPopup(feature.properties.popupContent, {className: feature.properties.className}); layer.bindPopup(feature.properties.popupContent); geojsonFeature.push(layer); } }, pointToLayer: function (feature, latlng) { var m = L.marker( latlng, { title : feature.properties.popupContent } ); geojsonFeature.push( m ); return m; } }).addTo(map); function markerFunction() { for (var i in geojsonFeature) { geojsonFeature[i].openPopup(); } } markerFunction(); }
これをしますと、consoleが
Uncaught TypeError: geojsonFeature[i].openPopup is not a function
になります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/02 14:46 編集
2020/02/02 14:54
2020/02/02 15:16
2020/02/03 02:49
2020/02/03 04:41
2020/02/03 07:50
2020/02/03 08:09
2020/02/03 13:09