みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。
1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 （優しく回答しましょう）
You are not logged in.
Pages: 1
いつもお世話になっております。Leafletを使ったmapにクリックで複数のマーカを立てその中の1つを選択してマーカー位置の座標を取得したいと思いあるサイトからぱくったコードで試しているのですがうまく行きませんでした。マーカーを選択すれば座標がポップアップで表示されるようになっているのですが、私の方法では最後に立てた位置情報の取得となってしまい選択したマーカの位置情報は得られません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GSI Tiles on Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<style>
body {padding: 0; margin: 0}
html, body, #map {height: 700px; width: 820px;}
</style>
</head>
<body>
<div id="map"></div>
<script>
var aa;
// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18,attribution: osmAttrib});
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([37.41868467,141.02215565 ], 12).addLayer(osm);
// Script for adding marker on map click
function onMapClick(e) { var marker = L.marker(e.latlng, { draggable: true,
title: "Resource location",alt: "Resource Location", riseOnHover: true }).addTo(map).bindPopup(e.latlng.toString()).openPopup();
// Update marker on changing it's position
marker.on("dragend", function (ev) {
var chagedPos = ev.target.getLatLng();
this.bindPopup(chagedPos.toString()).openPopup();
});
aa =e.latlng;
}
map.on('click', onMapClick);
function save() {
window.location = 'fmp://$/map002.fmp12?script=script02&$id='+aa;}
</script>
</body>
<input type="button" onclick="save()" value="指定ポイントの座標を保存 "style="position: absolute; right: 0px; bottom: 0px"/>
</html>
今回の方法では、最後のマーカー座標がLatLng(37.36443, 140.92953)の形で得られます。
複数でなければポップアップでもマーカーでも37.36443, 140.92953の形で取得できたので欲をかき複数のマッピングをしその中から1つを選択してその座標を取得できないかと悪あがきしているところです。前回の質問以上にJavaScriptの問題と思われますがご教示いただければ幸いです。
使用環境FM17、Windows10
JavaScriptと言うか、Leaflet の使い方ですね。
以下を追加で大丈夫です。
marker.on("click", function (ev) {
var chagedPos = ev.target.getLatLng();
this.bindPopup(chagedPos.toString()).openPopup();
window.location = 'fmp://$/HelloWorld?script=script02&$id='+chagedPos.toString();
});Offline
qb_dp様 早速のご回答有り難うございます。この方法では、確かに最後のマーキングしてから選択したマーカーをクリックすれば取得できるかもしれませんが、私がしたいのは、現状マーカーを選択すれば座標がポップアップで表示され、次のマーカーに移れば次のポップアップが出ると事になっています。ですので選択の度に座標がFM側記入されては困るのです。どれを選択するか確認してからfunction save() { で外に配置されたボタンで記入を実行したいのです。そのため、aa = chagedPos.toString;等いくつか試みたのですが結果undefinedでダメでした。
送信座標取得と送信は「ダブルクリック」イベントトリガで起動させる、とか？
Offline
Hiro様の
>送信座標取得と送信は「ダブルクリック」イベントトリガで起動させる
を参考にダブルクリップではなく右クリックでqb_dp様の方法を実行するようにしました。（ダブルクリップするとmapの拡大表示になるため）
・
// Update marker on changing it's position
marker.on("dragend", function (ev) {
var chagedPos = ev.target.getLatLng();
this.bindPopup(chagedPos.toString()).
openPopup();
});
//右クリックで座標をFMに書き出す
marker.on('contextmenu', function (ev) {
var chagedPos = ev.target.getLatLng();
this.bindPopup(chagedPos.toString()).openPopup();
window.location = 'fmp://$/map002.fmp12?script=script02&$id='+chagedPos.toString();
});
}
map.on('click', onMapClick);
・
マーカの選択（クリック）でポップアップが開き座標が表示され、もしその座標をM側に書き出したい場合は右クリックで書き出すようにしました。投稿以後も・・this.bindPopup(chagedPos.toString()).openPopup();・・で検索等していましたが、情報が少なく、私の考え方では無理みたいなので諦め、お二方の意見を参考にさせていただきました。有難うございました。これからも何かありましたら宜しくお願いいたします。
以下のようにすれば、既存のマーカーをクリックしたときに、その座標が aa に格納されます。
marker.on("click", function (ev) {
var chagedPos = ev.target.getLatLng();
this.bindPopup(chagedPos.toString()).openPopup();
aa=chagedPos.toString();
});Offline
qb_dp様 イベント処理をdragendからclickに変更すれば可能になるのですね。
私の場合、dragendのままにして・・this.bindPopup(chagedPos.toString()).openPopup(); aa=chagedPos.toString();・・としてもクリックイベントでないからaa=chagedPos.toString();が成り立たないので結果がundefinedとなったのか！他のQ&Aサイトのコードが違っていた例ではマーカーをドラッグしたら座標がドラッグ前のままになってしまうのでぱくり先の・・http://jsfiddle.net/kedar2a/LnzN2/2/・・の方がベストだと思い込んでいました。相も変わらず的外れなことばかりしていました。
qb_dp様、ご指摘有難うございました。
Pages: 1
[ Generated in 0.015 seconds, 9 queries executed - Memory usage: 566.08 KiB (Peak: 581.98 KiB) ]