Yahoo! JavaScriptマップAPI で、 Y.CenterMarkControl 中心点表示コントロールのON/OFFをするサンプルコード (2パターン)。

Y.Map クラスの addControl と removeControl メソッドでコントロールの表示・非表示するパターン


<html>
<head>
<meta charset="utf-8" />
<title>YOLP : Yahoo! JavaScriptマップAPI : Y.CenterMarkControl サンプル</title>
</head>
<body>

<div id="map" style="width:500px; height:500px"></div>

<div><input type="button" value="show" onclick="show();"</div>
<div><input type="button" value="hide" onclick="hide();"</div>

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

<script type="text/javascript">

var ymap;
var cmc;
var visible = false;

window.onload = function(){
    ymap = new Y.Map("map");
    ymap.drawMap(new Y.LatLng(35.184623, 136.899804), 17, Y.LayerSetId.NORMAL);
}

function show(){
    if(!visible){
        if(!cmc){
            cmc = new Y.CenterMarkControl();
        }
        ymap.addControl(cmc);
        visible = true;
    }
}

function hide(){
    if(visible){
        ymap.removeControl(cmc);
        visible = false;
    }
}
</script>

</body>
</html>

動作するサンプルはこちら
⇒ YOLP : Yahoo! JavaScriptマップAPI : Y.CenterMarkControl サンプル

Map クラスのリファレンスはこちら
⇒ YOLP(地図):Coreクラス - Yahoo!デベロッパーネットワーク

Y.Control クラスの show と hide メソッドでコントロールの表示・非表示するパターン


<html>
<head>
<meta charset="utf-8" />
<title>YOLP : Yahoo! JavaScriptマップAPI : Y.CenterMarkControl サンプル</title>
</head>
<body>

<div id="map" style="width:500px; height:500px"></div>

<div><input type="button" value="show" onclick="show();"</div>
<div><input type="button" value="hide" onclick="hide();"</div>

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

<script type="text/javascript">

var ymap;
var cmc = new Y.CenterMarkControl();

window.onload = function(){
    ymap = new Y.Map("map");
    ymap.addControl(cmc);
    ymap.drawMap(new Y.LatLng(35.184623, 136.899804), 17, Y.LayerSetId.NORMAL);
}

function show(){
    cmc.show();
}

function hide(){
    cmc.hide();
}
</script>

</body>
</html>

動作するサンプルはこちら
⇒ YOLP : Yahoo! JavaScriptマップAPI : Y.CenterMarkControl サンプル

Control クラスのリファレンスはこちら
⇒ YOLP(地図):Controlクラス - Yahoo!デベロッパーネットワーク

tags: yahoo_maps_api javascript

Posted by NI-Lab. (@nilab)