何箇所か alert を入れてみて何となく悪そうな場所は分かったのですが、そこから先は
Visual Web Developer 2008 Express Edition をインストールしても分かりませんでした。(これはデバッグツールの使い方自体良く分かっていないせいだと思います。)
また検索を繰り返し、次のページに辿り着いて漸く分かりました。
そこに書かれていた原因とは
「IEの場合、動的にスクリプトエレメント(<script></script>)にテキストの追加は、できないようです。」ということで、解決策は
「動的に関数を作成したいとかそういうことなら、文字列として、関数を構成してeval すればいいです。(script タグを追加する必要はない)」でした。
で、
eval とやらをしてみました。
IEのためのコードを追加しなければならないのかと思っていたので助かりました。普段からJavaScriptを書いている人には当たり前のことなんだろうなぁ(汗
今回のコード(IE6対応版)はこちら。( "+ expand source" のリンクをクリックして下さい。)
<style>
.slippymap img { padding: 0px !important; border: none !important;}
</style>
<!-- bring in the OpenLayers javascript library -->
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. -->
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript"><!--
// Blogger Slippy Map 0.1.1
var i = 0;
var lat = 54;
var lon = 0;
var z = 4;
var style = "width:300px; height:200px;";
var element1, element2, element3, text;
var tags = document.getElementsByTagName("div");
for ( var j=0; j < tags.length; j++ ) {
if ( tags[j].className == "slippymap" ) {
i++;
if ( tags[j].getAttribute("lat") ) {
lat = tags[j].getAttribute("lat");}
if ( tags[j].getAttribute("lon") ) {
lon = tags[j].getAttribute("lon");}
if ( tags[j].getAttribute("z") ) {
z = tags[j].getAttribute("z");}
if ( tags[j].getAttribute("style") ) {
style = tags[j].getAttribute("style");}
element1 = document.createElement("div");
element1.setAttribute("class","tempmap");
element1.setAttribute("style","margin-bottom:-35px;");
<!-- define a DIV into which the map will appear -->
element2 = document.createElement("div");
element2.setAttribute("id", "map" + i);
element2.setAttribute("style", style
+ " border-style:solid; border-width:1px; border-color:#000;");
element1.appendChild(element2);
element2 = document.createElement("br");
element1.appendChild(element2);
element2 = document.createElement("span");
element2.setAttribute("class","tempmap")
element2.setAttribute("style",
"font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");
text = document.createTextNode("Data by ");
element2.appendChild(text);
element3 = document.createElement("a");
element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat
+ "&lon=" + lon + "&zoom=" + z );
element3.setAttribute("title","See this map on OpenStreetMap.org");
text = document.createTextNode("OpenStreetMap");
element3.appendChild(text);
element2.appendChild(element3);
element3 = document.createElement("br");
element2.appendChild(element3);
element3 = document.createElement("a");
element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");
element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");
text = document.createTextNode("CC-BY-SA-2.0");
element3.appendChild(text);
element2.appendChild(element3);
element1.appendChild(element2);
tags[j].appendChild(element1);
eval("var lat"+ i + "=" + lat + "; var lon"
+ i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i
+ "; function lonLatToMercator(ll) { var lon = ll.lon * 20037508.34 / 180; "
+ "var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / "
+ "(Math.PI / 180); lat = lat * 20037508.34 / 180; return new "
+ "OpenLayers.LonLat(lon, lat); } ;"
+ "if (typeof window.addEventListener == 'function') { "
+ "window.addEventListener('load', init, false);} else if (typeof "
+ "window.attachEvent == 'object') { window.attachEvent('onload', "
+ "init);} else { var oldonload = window.onload ; if (typeof "
+ "window.onload != 'function') { window.onload = init;} else { "
+ "window.onload = function() { oldonload(); init(); } } };"
+ "function init() { map" + i + " = new OpenLayers.Map('map" + i
+ "', { controls:[ new OpenLayers.Control.Navigation()"
+ ", new OpenLayers.Control.PanZoom(), new OpenLayers.Control"
+ ".LayerSwitcher()], maxExtent: new OpenLayers.Bounds(-20037508.34, "
+ "-20037508.34, 20037508.34, 20037508.34), maxResolution:156543.0399, "
+ "units:'meters', projection: 'EPSG:900913' } ); var mapnik = new "
+ "OpenLayers.Layer.OSM.Mapnik('Mapnik'); map" + i + ".addLayer(mapnik);"
+ " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "
+ "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"
+ ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "
+ "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i
+ ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "
+ "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i
+ ".setCenter (lonLat" + i + ", zoom" + i + "); } ");
}
}
--></script>
しかし...
Firefox3とSafari3ではクレジットとライセンスが地図の枠内に収まるのに、IE6では枠外に出てしまうな。
良く見るとIE6では枠の線も表示されてないよ。
まっ、いっかぁ~。とりあえず動くようになったし。
あと、あんまり地図を貼り付けるとページの動きが遅くなりますね。当たり前か。