原因をググったところ、SSLサイトにhttpのコンテンツは埋め込めない、ということのようでした。
さらにググってみると、過去質問に同様の問題をかかえてらっしゃる方がいて、しかも解決できたとのことで参考にしています。
http://q.hatena.ne.jp/1360288279
が、回答の、更にコメントまで読むと詳しい方法が記載されているのですが、その解決のための方法が古くなっているようで同じ解決策がとれないでいます。
(ファイルをダウンロ-ドしてきて解凍しても、フォルダに「lib」というディレクトリがありませんし、Bing.jsも見当たりません)
この問題の解決方法を教えていただけませんでしょうか。
もちろん他の解決方法でも構いません。
よろしくお願いいたします。
ちなみにマップはこんな感じで表示させていました。
http://の時はこれで表示できていたのですが、SSLを導入しhttps://になったとたんに表示しなくなりました。。
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> <div id="map" style="width: 80%; height: 400px;"></div> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function() { // 緯度、経度 var lat = 35.658581, lng = 139.745433; // 地図の中心位置 var epsg4326 = new OpenLayers.Projection("EPSG:4326") var epsg3857 = new OpenLayers.Projection("EPSG:3857") var pos = new OpenLayers.LonLat(lng, lat).transform(epsg4326, epsg3857); // 地図 var map = new OpenLayers.Map("map", { layers: [ new OpenLayers.Layer.OSM() ], center: pos, zoom: 17, }); // スケールライン map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: "", bottomInUnits: ""})); // マーカー var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); var size = new OpenLayers.Size(21,25); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon('http://dev.openlayers.org/img/marker.png', size, offset); var marker = new OpenLayers.Marker(pos, icon); markers.addMarker(marker); }); </script>
これと同じ状況のような気がします。
ブラウザのコンソールには、こんな感じのエラーが出てます?
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5624.png.
補足にあるコードだと、
// 地図 var map = new OpenLayers.Map("map", { layers: [ new OpenLayers.Layer.OSM() ], center: pos, zoom: 17, });
の部分を、以下のような感じにすると、とりあえず地図は表示されるんじゃないでしょうか。
// 地図 var map = new OpenLayers.Map("map", { layers: [ new OpenLayers.Layer.OSM( "OpenStreetMap", // Official OSM tileset as protocol-independent URLs [ '//a.tile.openstreetmap.org/${z}/${x}/${y}.png', '//b.tile.openstreetmap.org/${z}/${x}/${y}.png', '//c.tile.openstreetmap.org/${z}/${x}/${y}.png' ], null ) ], center: pos, zoom: 17, });
後、マーカーの画像が http から取得しているので、こちらも https で取得できる画像の URL に変更する必要があります。
http://openlayers.org/api/OpenLayers.js を眺めてても、http に依存しているところが他にもあるようなので、すんなりとはいかないかもしれません(使ってない機能であれば、そのままにしておいても良いのですが)。
別の質問の fiwa さんの回答も、ぼくの以前の回答も、OpenLayers 2 を対象にしたものです。
OpenLayers 2 is outdated. Go to the latest 3.x version:
Documentation ? OpenLayers 2http://openlayers.org/
もう OpenLayers 2 は古臭いので、3 を使え、と(公式ではありませんが)。
# このページも、すでに消えてしまっています
openlayers の GitHub を見ると、今年の 1 月には「3」の文字を消されてますし、2月には v3.21ではなく v4.0 になっています。
https://github.com/openlayers/openlayers/commit/7424ee91e3e790d5a3ad84ad0a19588e60091c7b
一応、公式には OpenLayers 2 の情報も http://openlayers.org/two/ にありますし、GitHub(https://github.com/openlayers/ol2)でもメンテはされているようです(約一名?)。
ふーむ (´・ω・`)
これと同じ状況のような気がします。
ブラウザのコンソールには、こんな感じのエラーが出てます?
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5624.png.
補足にあるコードだと、
// 地図 var map = new OpenLayers.Map("map", { layers: [ new OpenLayers.Layer.OSM() ], center: pos, zoom: 17, });
の部分を、以下のような感じにすると、とりあえず地図は表示されるんじゃないでしょうか。
// 地図 var map = new OpenLayers.Map("map", { layers: [ new OpenLayers.Layer.OSM( "OpenStreetMap", // Official OSM tileset as protocol-independent URLs [ '//a.tile.openstreetmap.org/${z}/${x}/${y}.png', '//b.tile.openstreetmap.org/${z}/${x}/${y}.png', '//c.tile.openstreetmap.org/${z}/${x}/${y}.png' ], null ) ], center: pos, zoom: 17, });
後、マーカーの画像が http から取得しているので、こちらも https で取得できる画像の URL に変更する必要があります。
http://openlayers.org/api/OpenLayers.js を眺めてても、http に依存しているところが他にもあるようなので、すんなりとはいかないかもしれません(使ってない機能であれば、そのままにしておいても良いのですが)。
別の質問の fiwa さんの回答も、ぼくの以前の回答も、OpenLayers 2 を対象にしたものです。
OpenLayers 2 is outdated. Go to the latest 3.x version:
Documentation ? OpenLayers 2http://openlayers.org/
もう OpenLayers 2 は古臭いので、3 を使え、と(公式ではありませんが)。
# このページも、すでに消えてしまっています
openlayers の GitHub を見ると、今年の 1 月には「3」の文字を消されてますし、2月には v3.21ではなく v4.0 になっています。
https://github.com/openlayers/openlayers/commit/7424ee91e3e790d5a3ad84ad0a19588e60091c7b
一応、公式には OpenLayers 2 の情報も http://openlayers.org/two/ にありますし、GitHub(https://github.com/openlayers/ol2)でもメンテはされているようです(約一名?)。
ふーむ (´・ω・`)
ええ、きっとレアケ-スなんだと思います(笑)。
質問させていただくのは明日になると思います。
よろしくお願いします。
答えられるかどうかは、分かりませんよ。
WordPress どっぷりなのは、rouge_2008 さん向きなような気もします :-)
ええ、きっとレアケ-スなんだと思います(笑)。
2017/05/29 15:53:02質問させていただくのは明日になると思います。
よろしくお願いします。
答えられるかどうかは、分かりませんよ。
2017/05/29 16:11:57WordPress どっぷりなのは、rouge_2008 さん向きなような気もします :-)