地図の種類を変更
広告
表示されている地図の種類を変更する方法を確認します。種類を変更するにはMapクラスで用意されているsetLayerSetIdメソッドを使います。
setLayerSetId(id:String, redraw?:Boolean)
新しいレイヤーセットIDを選択します。LayerSetは AddLayerSetで地図に追加されている必 要があります。 Parameters: id レイヤーセットID redraw 地図再描画の有無
1番目の引数に地図の種類を指定します。指定可能な値はLayerSetIdクラスのフィールドとして定義されており、現時点では次の3つがあります。
LayerSetId.B1 地下街のレイヤーセットID LayerSetId.NORMAL 標準地図のレイヤーセットID LayerSetId.PHOTO 航空写真のレイヤーセットID
オプションである2番目の引数にfalseを指定すると、地図の種類を変更しますが再描画は行われないため地図が表示されない状態となります。具体的な使い方は分かりませが、他の処理を合わせて行う場合に都度再描画をしないためのものと思われます。
実際には次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.662484, 139.734222), 10, Y.LayerSetId.PHOTO);
ymap.setLayerSetId(Y.LayerSetId.NORMAL);
この場合は地図を航空写真でいったん表示した後で標準地図に地図の種類を変更しています。
サンプルプログラム
それでは簡単なサンプルで試してみます。
var ymap;
window.onload = function() {
ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
}
function changeMapType(mapType){
if (mapType == 1){
ymap.setLayerSetId(Y.LayerSetId.NORMAL);
}else{
ymap.setLayerSetId(Y.LayerSetId.PHOTO);
}
}
<!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/code2_1.js" type="text/javascript"></script>
</head>
<body>
<p>
JavaScriptマップAPIを使ったサンプルです。
</p>
<div id="map" style="width:400px; height:300px"></div>
<form>
<p style="padding:0;margin:0;">
<input type="button" value="標準地図" onclick="changeMapType(1)" />
<input type="button" value="航空写真" onclick="changeMapType(2)" />
</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>
上記を実際にブラウザ見てみると次のように表示されます。
画面左下にある「標準地図」ボタンや「航空写真」ボタンを押すと地図の種類を切り替えられます。
地図の種類の切り替えにはコントロールを使うことでも可能です。こちらは別のページで行います。
( Written by T.buzz.Ikura+ )
Facebook Page