「モバイルマップ」に PlaceEngine の現在地取得機能を追加するにあたり、はまったところを共有しておきます。
PlaceEngine のページに用意されている以下のチュートリアル（Sample2: PlaceEngine + Google Maps の部分）にならって実装したところ難なくできたような気がしました。
ところが、Mac の Safari と Firefox で確認したあと、PC の IE で見ようとしたら、「操作は中断されました」というエラーが出て撃沈。
この謎のエラーメッセージのほかには何の手がかりもありません。
ググってみると見覚えのあるエントリーが。。
» GOGA - doodle開発記: インターネットサイトは開けません。操作は中断されました。
けもの会議仲間の ishimaru さんがちょうどそのままずばりのエントリーを書かれていました。
結局レンダリングのタイミングでIEの気に障る部分がでるとこのエラーが出るようで、iframeで呼び出すかbody onloadで呼び出すと出なくなるというのが解決策の模様。
ということで、結局 PlaceEngine + Google Maps のサンプルを以下のように書き換えたところうまく表示されるようになりました。
PEngine オブジェクト生成部分を onload で呼び出す形に変更しています。書き換えた部分は赤字にしてあります。
<!DOCTYPE html PUBLIC "-//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>PlaceEngine + Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=...." *1
type="text/javascript"></script>
<script src="http://www.placeengine.com/javascripts/pengine.js" type="text/javascript"></script>
<script type="text/javascript"> *2
//<![CDATA[
var map = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(35.67134, 139.76516), 17);
}
}
function loadPe() {
pe = new PEngine({
onGetLocation: function(x, y, r, info) { *4
if (map != null) map.panTo(new GLatLng(y, x));
if (document.getElementById(”pestatus”)!=null) {
document.getElementById(”pestatus”).innerHTML = info.addr;
}
},
idstatus:”pestatus”,
appkey:”…..” *5
});
}
//]]>
</script>
<style type=”text/css”>
.peui input {margin:0 0 -4px 0;}
</style>
</head>
<body onload=”load();loadPe();” onunload=”GUnload()”>
<h1>PlaceEngine + Google Maps</h1>
<div id=”map” style=”width: 500px; height: 300px”></div>
<div class=”peui”>
<input alt=”位置を教える” src=”http://www.placeengine.com/images/wide_bt2.png” type=”image”
onclick=’pe.registerLocation(map)’ /> *3
<input alt=”現在地を取得” src=”http://www.placeengine.com/images/wide_bt1.png” type=”image”
onclick=’pe.getLocation()’ />
<span id=”pestatus”></span>
</div>
<script type=”text/javascript”>
var pe;
</script>
</body>
</html>
この記事にリンク
コメント・トラックバック(4)
Webカテゴリの最近の記事
新着情報
