iOSのブラウザだと、navigator.geolocation.watchPosition()の呼び出し後にOpenLayersで国土地理院地図を表示させようとしても、地図領域が真っ白(拡大・縮小アイコンは表示される)で何も表示されないという問題が起きた。
html例は以下。
原因は、このページをhttpsでアクセスする場所に置いているのに、国土地理院のurlをhttpで指定していたこと。
(位置情報取得にはhttpsアクセスが要求されるので必然的にページを配置するのはhttpsアクセスできるサーバになる)
「url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"」→「url: "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"」に変更することで、ブラウザ位置情報の取得を行っても、OpenLayersでの地図表示ができるようになった。
<!DOCTYPE html> <html> <head runat="server"> <link rel="stylesheet" href="./ol.css" /> <script src="./ol.js"></script> </head> <body> <div id="map" style="width:500px; height:500px; border:solid 1px black;"></div> <div id="pos"></div> <script> window.onload=function(){ // 位置情報を常に変数に格納し続ける navigator.geolocation.watchPosition( function (position) { currentLatitude = position.coords.latitude; currentLongitude = position.coords.longitude; document.querySelector("#pos").innerText = currentLatitude + " , " + currentLongitude; }, function (error) { alert("位置情報の取得に失敗しました。サイト設定で位置情報へのアクセスを許可してください。\n( " + error.message + ")"); }, { "enableHighAccuracy": true, "timeout": 20000, "maximumAge": 0 } ); // 地図表示 var obMap = new ol.Map({ target: 'map', view: new ol.View({ maxZoom: 16 }) }); var obTileLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", // ●ページがhttpsでアクセスされているのに、ここがhttpなのが問題 projection: "EPSG:3857" }) }); obMap.addLayer(obTileLayer); obMap.getView().setCenter(ol.proj.fromLonLat([132.7533995, 34.5698292])); obMap.getView().setZoom(9); }; </script> </body> </html>
そうは言っても、ページをhttpsでアクセスする場所に置いた状態で国土地理院のurlをhttpで指定するだけなら、ちゃんと地図は表示されていた。
なぜ位置情報の取得をすると突然表示できなくなるのか……。