leafletマップでボタンを押して地図の中心を移動させたい

前提

leafletマップにて「東京タワー」と「東京駅」にピンを打ち、ページを開いたときは東京タワーが中心に表示されるようにプログラムを組みました。このとき「東京駅」のピンをクリックするとpanToメソッドで地図の中心が東京駅に移動するようにしています。

実現したいこと

地図の下に「東京駅に移動」のボタンを設置し、押したら同様に中心が東京駅に移動するようにしたいです。

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

ピンをクリックしたとき同様移動できるかと思ったらボタンを押しても反応せず...
html初心者でpanToメソッドも数時間前に知ったのですが使い方が間違っているでしょうか？
正しい記述を教えていただけると助かります。

該当のソースコード

<html>
<head>
  <meta charset="UTF-8">
  <title>panTo</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
  <script>
    function init() {
      //地図を表示するdiv要素のidを設定
      var map = L.map('mapcontainer');
      //地図の中心とズームレベルを指定
      map.setView([35.65, 139.74], 13);
      //表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する
      L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',{
        attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" }).addTo(map);

      L.marker([35.65, 139.74]).bindPopup('東京タワー').addTo(map);
      L.marker([35.68, 139.76]).bindPopup('東京駅').on('click',  function(){map.panTo(new L.LatLng(35.68,139.76),14);}).addTo(map);
    }
  </script>
</head>
<body onload="init()">
  <div id="mapcontainer" style="width:600px;height:600px"></div>
  
  <button id="button1" onclick="move()">東京駅へ移動</button>
  <script>
    function move() {
      map.panTo(new L.LatLng(35.68, 139.76),14);
    }
    </script>

</body>
</html>

行動規範の内容に同意します

回答1件

自己解決

色々調べて自己解決いたしました。
同じ初心者のかたの参考になるように解決方法を書いておきます。

主な原因はfunction内でこの変数を宣言していたことで

var map = L.map('mapcontainer');>

これだと変数mapはローカル変数となり関数init()内でしか有効にならないため、関数move()では使えませんでした。これは変数のスコープと検索すれば知らない人は理解できると思います。

最終的に関数を使わずに関数init()内の記述をbodyの下のほうに書くことで解決しました。

ただこの記述位置も注意が必要で、今回の場合は地図の表示位置に設定した

<div id="mapcontainer" style="width:600px;height:600px"></div>

よりも下、かつ関数move()より上に記述する必要があります。関数move()で変数「map」を使うためですね。

以下修正後のコードを書いておきます。

<html>
<head>
  <meta charset="UTF-8">
  <title>panTo</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
</head>

<body>
  <div id="mapcontainer" style="width:600px;height:600px"></div>

  <script>
      //地図を表示するdiv要素のidを設定
      var map = L.map('mapcontainer');
      //地図の中心とズームレベルを指定
      map.setView([35.65, 139.74], 13);
      //表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する
      L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',{
        attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" }).addTo(map);

      L.marker([35.65, 139.74]).bindPopup('東京タワー').addTo(map);
      L.marker([35.68, 139.76]).bindPopup('東京駅').on('click',  function(){map.panTo(new L.LatLng(35.68,139.76),14);}).addTo(map);
  </script>
  
  <button id="button1" onclick="move()">東京駅へ移動</button>
  <script>
    function move() {
      map.panTo(new L.LatLng(35.68, 139.76),14);
    }
    </script>

</body>
</html>

投稿2022/09/10 13:00

totoroooo

総合スコア10