「Open Street Map: マップ上にマーカー表示と経度・緯度の取得するには」のコードを使わせて頂いて、OpenStreetMap API 等の勉強をさせて頂いています。

ebata

3年前

今日は、マウスクリックで、始点と終点の位置情報を取れる方法を試してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Open Street Map Test</title>
  <style type="text/css">
    html,body{ margin: 0px; }
  </style>
  <!--
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  -->

  <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

  <script type="text/javascript">
    // グーローバル変数の定義 
    var od;
    var des_lonlat;
    var arr_lonlat;
  </script>

  <script>
    function MapInit(){
 
      map = new OpenLayers.Map("MapCanvas");

      var mapnik = new OpenLayers.Layer.OSM();
      map.addLayer(mapnik);
    
      //var lonLat = new OpenLayers.LonLat(139.47552, 35.59857)
      var lonLat = new OpenLayers.LonLat(139.796182, 35.654285)
        .transform(
          new OpenLayers.Projection("EPSG:4326"), 
          new OpenLayers.Projection("EPSG:900913")
        );
      map.setCenter(lonLat, 17); 

      OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
        initialize: function(options) {
          this.handler = new OpenLayers.Handler.Click(
            this, {
              'click': this.onClick
            }, this.handlerOptions
          );
        }, 

        onClick: function(e) {
          var lonlat = map.getLonLatFromPixel(e.xy);
          lonlat.transform(
            new OpenLayers.Projection("EPSG:900913"), 
            new OpenLayers.Projection("EPSG:4326")
          );

          var markers = new OpenLayers.Layer.Markers("Markers");
          map.addLayer(markers);
          var marker = new OpenLayers.Marker(
            new OpenLayers.LonLat(lonlat.lon, lonlat.lat)
            .transform(
              new OpenLayers.Projection("EPSG:4326"), 
              new OpenLayers.Projection("EPSG:900913")
            )
          );
          markers.addMarker(marker);
          $("#LonLat").html("lon:" +lonlat.lon+ "  lat:" +lonlat.lat);

          if (od == "arrival"){
            arr_lonlat = lonlat;
            alert("arr_lonlatが設定されました" +  arr_lonlat.lon +" " + arr_lonlat.lat);
          } else if (od == "destination"){
            des_lonlat = lonlat;
            alert("des_lonlatが設定されました" +  des_lonlat.lon +" " + des_lonlat.lat);
          }
        }
      });

      var click = new OpenLayers.Control.Click();
      map.addControl(click);
      click.activate();
    }
  </script>

<script type="text/javascript">
    $(document).ready(function () {
    $("#button01").on('click', function () {
      od = "destination";
      alert(od + "  ボタン1がクリックされました。");
    });
    $("#button02").on('click', function () {
      od = "arrival";
      alert(od + "  ボタン2がクリックされました。");      
    });
    $("#button03").on('click', function () {
      od = "confirmed"
      alert(od + "  ボタン3がクリックされました。");
      // 
    });

  })
</script>


</head>

<body>
  <div id="MapCanvas" style="width:700px;height:700px;"></div>
  <div id="LonLat"></div>
  <input id="button01" type="button" value="Button1"/>
  <input id="button02" type="button" value="Button2" />
  <input id="button03" type="button" value="Button3" />

  <script type="text/javascript">MapInit();</script>



</body>

</html>