地物の削除

広告

地図に追加した地物を削除する方法を確認しｈます。Mapクラスで用意されているremoveFeatureメソッドを使います。 

removeFeature(feature:Feature)

地図から地物を削除します。

Parameters:
  features  地物

1番目の引数に指定したFeatureインターフェースを実装したクラスのオブジェクトが表す地物を地図から削除します。

具体的には次のように記述します。 

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);

var marker1 = new Y.Marker(new Y.LatLng(35.68025,139.7693));
var marker2 = new Y.Marker(new Y.LatLng(35.666118,139.758024));

ymap.addFeature(marker1);
ymap.addFeature(marker2);

ymap.removeFeature(marker2);

removeFeatureメソッドの引数にはaddFeatureメソッドなどで追加したオブジェクトを指定して下さい。

サンプルプログラム

では実際に試してみます。

code3_1.js 

var ymap;
var line;
var flag;

window.onload = function() {
  ymap = new Y.Map("map");
  ymap.drawMap(new Y.LatLng(41.7724,140.72628), 13);

  var array = [
    new Y.LatLng(41.75886,140.703535),
    new Y.LatLng(41.79672,140.757179)
  ]

  line = new Y.Polyline(array);

  ymap.addFeature(line);
  flag = true;
}

function removeLine(){
  if (flag == true){
    ymap.removeFeature(line);
    document.getElementById("line").value = "ラインを追加";
    flag = false;
  }else{
    ymap.addFeature(line);
    document.getElementById("line").value = "ラインを削除";
    flag = true;
  }
}

sample3_1.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Yahoo! JavaScriptマップAPI</title>

    <script type="text/javascript" charset="utf-8"
    src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(id)">
    </script>

    <script src="./js/code3_1.js" type="text/javascript"></script>

  </head>
  <body>
    <p>
    JavaScriptマップAPIを使ったサンプルです。
    </p>

    <div id="map" style="width:400px; height:300px"></div>
    <form>
    <p>
    <input type="button" id="line" value="ラインを削除" onclick="removeLine()" />
    </p>
    </form>

    <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
    <a href="http://developer.yahoo.co.jp/about">
    <img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:10px 15px 15px 15px"></a>
    <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->

  </body>
</html>

ブラウザでアクセスすると次のように表示されます。

p3-1

画面左下にあるボタンを押すたびに、地図に追加されたポリラインを追加したり削除したりを繰り返します。

p3-2

p3-3

以上です。

( Written by Tatsuo Ikura+ )

Facebook Page