bloggerでjavascript使って動的にiframeを更新してみます。
前回に続き、国土地理院さんのページに作図を表示する感じです。
国土地理院のページに作図して、取得したhtmlを修正してみました。
もっと綺麗に修正する方法ありそうですが、ひとまずこんな感じで。
うまくいくかな？
上記はこんな感じで書いています。
<div>
出典 <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a></div>
<script type="text/javascript">
//<![CDATA[
<!--
var vURL = "https://maps.gsi.go.jp";
var vURL_Site = "/index_pm.html?postmessage=1#12/34.397213/132.476881/&base=std&ls=std&disp=1&vs=c1j0h0k0l0u0t0z0r0s0m0f1";
var oMap = null;
function Init(){
//oMap = document.createElement("iframe");
oMap = document.getElementById("kokudo_map");
oMap.style.display = "none";
oMap.src = vURL + vURL_Site;
oMap.onload = function(){
var oContent = oMap.contentWindow;
var ClientMode = {
baseUrl : null
, location : null
, LayerJS : null
, sakuzuList : null
, queryString : null
};
ClientMode.sakuzuList = [{"fileName":"","visible":true,"features":[{"type":"Feature","properties":{"_markerType":"Circle","_color":"#000000","_opacity":0.5,"_weight":3,"_fillColor":"#9fc5e8","_fillOpacity":0.5,"_radius":6000},"geometry":{"type":"Point","coordinates":[132.476881,34.397213]}}]}];
oContent.postMessage(ClientMode, vURL);
EvtResize();
};
//document.body.appendChild(oMap);
};
function EvtResize(){
var w = window.innerWidth;
var h = window.innerHeight;
if(oMap != null){
//oMap.style.width = w + "px";
//oMap.style.height = h + "px";
if(oMap.style.display == "none"){
oMap.style.display = "block";
}
}
};
function KokudoFuncPost(){
// dummy
}
function KokudoFunc() {
window.onload = function(){
document.body.style.margin = "0px";
document.body.style.padding = "0px";
document.body.style.overflow = "hidden";
Init();
}
window.onresize = EvtResize;
}
//-->
//]]>
</script>
<iframe id="kokudo_map" width="500" height="500" onload="Init();"></iframe>
<br />
