Bing Maps の Geocode、逆 Geocode のプログラミング

Bing Maps の Geocode (住所から地図を取得)、Reverse-Geocode (地図から住所を取得) の JavaScript プログラミング (サンプル コード) をメモしておく。

例えば、下記の UI を持つ Web ページ (html) と仮定する。

Bing_sample

Geocoding のプログラミング

まず、上図のテキスト ボックスに日本の住所 (文字列) を入力して Pin アイコン (左上) を押すと、 Bing Maps の地図を更新するサンプル コードは、下記の通り。(説明は、コメントを見てほしい。) なお、あらかじめ、Bing Maps のサイトからアクセス キーを取得し、 下記の <access key> に設定しておく。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
  <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?
    v=6.3&mkt=ja-jp"></script>
  <script>
  $(document).ready(function () {
    map = new VEMap('map');
    map.LoadMap();
    map.SetCenterAndZoom(new VELatLong(35.70, 139.7), 13);

    //
    // GeoCoding sample
    //
    $('#checkloc').click(function () {
      var addrval = $('#addresstxt').val();
      var requestUri =
        'http://dev.virtualearth.net/REST/v1/Locations?'
        + 'output=json&countryRegion=JP&addressLine='
        + encodeURI(addrval) + '&key=<access key>&c=ja-jp';
      $.ajax({
        url: requestUri,
        dataType: 'jsonp',
        jsonp: 'jsonp',
        beforeSend: function (xhr) {
          $('#msgline').html('changing map ...');
        },
        success: function (data, status) {
          $('#msgline').html('got location !');
          if (data &&
            data.resourceSets &&
            data.resourceSets.length > 0 &&
            data.resourceSets[0].resources &&
            data.resourceSets[0].resources.length > 0) {

            // 返された bbox (位置情報) の内容から地図を更新
            var bbox = data.resourceSets[0].resources[0].bbox;
            map.SetMapView(new VELatLongRectangle(
              new VELatLong(bbox[0], bbox[1]),
              new VELatLong(bbox[2], bbox[3])));

            // Bing Map にプッシュピンを設定
            var lat = new VELatLong(
              data.resourceSets[0].resources[0].point.coordinates[0],
              data.resourceSets[0].resources[0].point.coordinates[1]);
            var pin = new VEShape(VEShapeType.Pushpin, lat);
            map.AddShape(pin);
          }
        },
        error: function () {
          $('#msgline').html('error.');
        }
      }); // ajax
    }); // click

    $('#msgline').html('ready !');

  }); // ready
  </script>
</head>
<body>
  <p>
    <div>
      <a href="#" id="checkloc">
      <img src="pin.png" width="50" border="0" />
      </a>
    </div>
    <div>
      <input type="text" id="addresstxt" style="width:400px" />
    </div>
  </p>
  <div id="map" style="position:relative;width:400px;height:300px;"> 
  </div>
  <p id="msgline" style="background-color:gray;">initializing ...</p>
</body>
</html>

また、都道府県名や市区町村名など、入力欄をわける場合があるが (下図)、この場合には、下記の通りプログラミングすると良い。

Bing_sample2

<script>
 $(document).ready(function () {
  ... skip code ...

  var requestUri =
    'http://dev.virtualearth.net/REST/v1/Locations?output=json&countryRegion=JP'
    + '&adminDistrict='
    + encodeURI($('#districttxt').val())
    + '&locality='
    + encodeURI($('#localitytxt').val())
    + '&addressLine='
    + encodeURI($('#linetxt').val())
    + '&key=<access key>&c=ja-jp';
  $.ajax({
    url: requestUri,
    dataType: 'jsonp',
    jsonp: 'jsonp',
    ... skip code ...

</script>

... skip code ...

<div>
  都道府県
  <input type="text" id="districttxt" /><br />
  市区町村
  <input type="text" id="localitytxt" /><br />
  番地など
  <input type="text" id="linetxt" /><br />
</div>

... skip code ...

Reverse-Geocoding のプログラミング

今度は逆に、Bing Maps の地図をマウスで右クリックすると、 その位置の住所をテキスト ボックスに設定するサンプルだ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
  <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?
    v=6.3&mkt=ja-jp"></script>
  <script>
  $(document).ready(function () {
    map = new VEMap('map');
    map.LoadMap();
    map.SetCenterAndZoom(new VELatLong(35.70, 139.7), 13);

    //
    // Reverse-GeoCoding sample
    //
    map.AttachEvent("onclick", function (e) {
      // マウスの右クリック以外の場合は、何もしない
      if (!e.rightMouseButton)
        return;

      $('#msgline').html('getting location ...');

      // マウスの選択位置から latlong を取得
      var lat;
      if (e.latLong) {
        lat = e.latLong;
      } else {
        var pxl = new VEPixel(e.mapX, e.mapY);
        lat = map.PixelToLatLong(pxl);
      }

      // Bing Map にプッシュピンを設定
      map.Clear()
      var shape = new VEShape(VEShapeType.Pushpin, lat);
      map.AddShape(shape);

      // latlong から場所の詳細情報を取得
      map.FindLocations(lat, function (loc) {
        $('#addresstxt').val(loc[0].Name);
        $('#msgline').html('location changed !');
      });
    }); // AttachEvent

    $('#msgline').html('ready !');

  }); // ready
  </script>
</head>
<body>
  <p>
    <div>
      <a href="#" id="checkloc">
      <img src="pin.png" width="50" border="0" />
      </a>
    </div>
    <div>
      <input type="text" id="addresstxt" style="width:400px" />
    </div>
  </p>
  <div id="map" style="position:relative;width:400px;height:300px;"> 
  </div>
  <p id="msgline" style="background-color:gray;">initializing ...</p>
</body>
</html>

なお、https (SSL) のサイトから、http のサイトのサービス (jsonp など) を呼び出すことはセキュリティー上の理由から許可されていない。(ブラウザーが警告を表示する。)
Bing Maps では https (SSL) による呼び出しもサポートしているため、このような場合には、下記の通り、「s=1」のクエリー文字列を入れて https (SSL) を使用する。(これを入れておかないと、内部で使用される jsonp 呼び出しなどで http が使用されてしまうので注意。)

<script type=”text/javascript” src=”https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=ja-jp&s=1“></script>

Advertisements

One thought on “Bing Maps の Geocode、逆 Geocode のプログラミング

  1. Pingback: Word の Content Control を使った Office 2013 Apps のドキュメント テンプレート « Net&Web

Comments are closed.