Adsense広告スクエアv1

2020年5月5日火曜日

bloggerでjavascript 国土地理院の動的iframe

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 />



0 件のコメント:

コメントを投稿