画像をクリックしてsrc情報を取得したい

Question

前提・実現したいこと

leafletのポップアップ内の画像をクリックした際にその画像のsrcや、nameの情報を取得したいです。localStorage.setItem("key",name);だと、どこをクリックしてもgeojsonﾃﾞｰﾀの最後の値(sannomiya)しか取得できません。

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

var baseMaps = {"OSM" : osm};

var map = L.map('map', {layers: [osm]});
map.setView([34.694657,135.180144], 15);

// GeoJSONレイヤーを追加
$.getJSON("/map/geojson", function(data) {
    var geoJsonLayer = L.geoJson(data).addTo(map);
    // マーカーにポップアップ追加
    geoJsonLayer.eachLayer(function(data){
        var name = data.feature.properties.field_name
        var loc = data.feature.properties.location

        data.bindPopup(
        '<b　id="xxx">'+ name +'</b><br>'+ 
        '<b>'+ loc + '</b>'+
        '<a href="/win2/" target="_blank" rel="noopener"><br>'+
        '<img id="myImg" src="/media/image/' + name + '/' + name +'.JPG" width="100%" height="100%" /a>'
        );

        localStorage.setItem("key",name);
        });
    });
```geojson
{"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"Point","coordinates":[135.195251,34.694240]},"properties":{"name":"kasuganomiti","location":"kobe"}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[135.204177,34.680760]},"properties":{"name":"kitafuto","location":"kobe"}}
{"type":"Feature","geometry":{"type":"Point","coordinates":[135.180144,34.694657]},"properties":{"name":"sannomiya","location":"kobe"}}
]
}

### 試したこと
document.getElementByIdだと、undifiendがでます。

```javascript
var ekimei = document.getElementById("xxx");
console.log(ekimei));

Answer 1

keyが同一であれば上書きされます。
「localstorage 複数 保存」で調べてみてください。

Comments

[yamatar]

var datalist = {
name: name,
loc: loc,
};
localStorage.setItem("datalist", JSON.stringify(datalist));
console.log(datalist.name);
を追加したところ、nameが全て取得できましたが、
マーカーや画像にマウスオーバーしたらそのnameのみを取得させるにはどのようにすればよいのでしょうか？
”kitafuto”のマーカーやポップアップ画像にマウスオーバーしたら、”kitafuto”を取得する。

[kei344]

> 全て取得できましたが
datalistというキーでマーカーごとに上書きしているだけでは。

> マーカーや画像にマウスオーバーしたらそのnameのみを取得させるにはどのようにすればよいのでしょうか？
クリックじゃなかったのか。
ポップアップ内の画像のクリックで内容： https://jsfiddle.net/dwvbh4f1/
マーカークリックで内容： https://jsfiddle.net/dwvbh4f1/1/

【Documentation - Leaflet - a JavaScript library for interactive maps】
https://leafletjs.com/reference-1.6.0.html#interactive-layer

[yamatar]

解決できました。
ありがとうございました。