ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら
ｵ?ﾌﾟﾝｽﾄﾘ?ﾄﾏｯﾌﾟを使い､Wordpressのｻｲﾄ上にﾏｯﾌﾟを表示していましたが､SSLを導入し､URLがhttps:になったとたんにﾏｯﾌﾟが表示されなくなりました｡
原因をｸﾞｸﾞったところ､SSLｻｲﾄにhttpのｺﾝﾃﾝﾂは埋め込めない､ということのようでした｡
さらにｸﾞｸﾞってみると､過去質問に同様の問題をかかえてらっしゃる方がいて､しかも解決できたとのことで参考にしています｡
http://q.hatena.ne.jp/1360288279
が､回答の､更にｺﾒﾝﾄまで読むと詳しい方法が記載されているのですが､その解決のための方法が古くなっているようで同じ解決策がとれないでいます｡
(ﾌｧｲﾙをﾀﾞｳﾝﾛ?ﾄﾞしてきて解凍しても､ﾌｫﾙﾀﾞに｢lib｣というﾃﾞｨﾚｸﾄﾘがありませんし､Bing.jsも見当たりません)
この問題の解決方法を教えていただけませんでしょうか｡
もちろん他の解決方法でも構いません｡
よろしくお願いいたします｡
●質問者:
mocchi
●ｶﾃｺﾞﾘ:ｲﾝﾀｰﾈｯﾄ
ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 1/1件
▽最新の回答へ
●
質問者から
ちなみにﾏｯﾌﾟはこんな感じで表示させていました｡
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: 
http://openlayers.org/
Documentation ? OpenLayers 2
もう 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)でもﾒﾝﾃはされているようです(約一名？)｡
ふｰむ (´･ω･｀)
mocchiさんのｺﾒﾝﾄ
一発で表示されました！
ありがとうございます｡
本当に助かりました｡
最初､いただいたｺ?ﾄﾞに置き換えても地図は表示されなかったのですが､ﾌﾞﾗｳｻﾞのｷｬｯｼｭを消し､読み込み直したら表示されていました！
ありがとうございました｡
本当にいつもお世話さまです｡
毎回助けていただき感謝しております｡
mocchiさんのｺﾒﾝﾄ
先日はありがとうございました｡
いただいた情報を元に今度は､以前にご尽力いただいた検証ｻｲﾄの大きいﾏｯﾌﾟの方もSSLｻｲﾄに組み込もうとしております｡が､やはり苦戦しておりまして､どのあたりがﾀﾞﾒなのかわからず､このまま引き続いて質問させていただけませんでしょうか｡
(ﾎﾟｲﾝﾄは直接のお支払いとさせていただきます)
もともとのｺ?ﾄﾞは以下の通りで､検証ｻｲﾄの方では問題なく動いております｡
>|php|
<?php
if (have_posts()) {
while (have_posts()) {
the_post();
get_template_part('content', 'page');
}
}
?>
<br><br>
<?php
$place = $_POST['place'];
$cc = $_POST['cc'];
if ($cc) {
foreach ($cc as $v) {
$cc_stat[$v] = 'checked';
}
}
?>
<style>
form label {
margin-right: 2ex;
}
</style>
<form action="" method="post">
検索したい地域 <input type="text" name="place" value="<?php echo $place ?>">
<!-- ｶﾃｺﾞﾘｰの指定 -->
<label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食 </label>
<label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係 </label>
<label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ﾌｧｯｼｮﾝ関係 </label>
<label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ﾍﾟｯﾄ関係 </label>
<br>
<input type="submit" name="send" value="検索">
</form>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<?php
if ($place):
$args = Array(
'post_type' => 'post',
'posts_per_page' => -1,
'meta_query' => array(array(
'key' => 'address',
'value' => $place,
'compare' => 'LIKE'
))
);
// ｶﾃｺﾞﾘｰのどれかにﾁｪｯｸが入っていたら､検索条件を追加する
$cc = $_POST['cc'];
if (sizeof($cc) > 0) {
$args['category__in'] = $cc;
}
$the_query = new WP_Query($args);
if ($the_query->have_posts()):
?>
<div id="map" style="width: 99%; height: 650px;"></div>
<script type="text/javascript">
(function() { // ★ こんなので､くるんでみる
var posts = [];
<?php while ($the_query->have_posts()) :
$the_query->the_post();
$googlemap = get_field('lat');
if (! $googlemap) { // ﾏｯﾌﾟ住所が登録されていないこともある
continue;
}
$category = get_the_category();
?>
posts.push({
lat: '<?php echo post_custom("lat")?>',
lng: '<?php echo post_custom("lon")?>',
name: '<?php echo post_custom("Name")?>',
link: '<?php the_permalink();?>',
title: '<?php the_title(); ?>',
cat_id: '<?php echo $category[0]->category_nicename; ?>'
});
<?php endwhile; // End the loop. Whew. ?>
// ★ これ以降､OpenLayers API を使うように､ばっさりと書き換え
var map;
var select;
function display_map() {
// ﾏｰｶｰとﾂｰﾙﾁｯﾌﾟを､店舗情報毎に設定するための overlay
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: '${marker_image}',
graphicWidth: 21,
graphicHeight: 25,
graphicYOffset: -25,
cursor: "pointer",
title: '${tooltip}',
})
});
var icon_map = {
2: "http://dev.openlayers.org/img/marker.png",
3: "http://dev.openlayers.org/img/marker-blue.png",
4: "http://dev.openlayers.org/img/marker-gold.png",
5: "http://dev.openlayers.org/img/marker-green.png",
};
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg3857 = new OpenLayers.Projection("EPSG:3857");
// ﾏｰｶｰの生成
var features = [];
for (var i in posts) {
var post = posts[i];
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(post.lng, post.lat)
.transform(epsg4326, epsg3857), {
tooltip: post.title,
marker_image: icon_map[ post.cat_id ],
post: post,
}
));
}
overlay.addFeatures(features);
overlay.events.on({
'featureclick': function(evt) {
toggle_popup(evt.feature);
},
});
// ﾏｯﾌﾟの生成
map = new OpenLayers.Map("map");
map.addLayers([new OpenLayers.Layer.OSM(), overlay]);
// ﾏｰｶｰのｸﾘｯｸ状態を取得するために､SelectFeature なるものを作る
select = new OpenLayers.Control.SelectFeature(overlay);
map.addControl(select);
select.activate();
// ﾏｰｶｰが含まれる範囲の Bounds と､それに合わせたｽﾞｰﾐﾝｸﾞ
var bounds = new OpenLayers.Bounds();
for (var i in posts) {
bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat));
}
bounds.transform(epsg4326, epsg3857);
map.zoomToExtent(bounds);
// ｽﾞｰﾑの最大値は 16 まで
if (map.getZoom() > 16) {
map.zoomTo(16);
}
}
// 吹き出しの｢×｣を押したときの処理
function close_popup(evt) {
toggle_popup(this.feature);
}
// ﾏｰｶｰをｸﾘｯｸしたときに吹き出しの表示を切り替える
function toggle_popup(feature) {
if (! feature.popup) {
var post = feature.attributes.post;
var content = '<div>' + post.name + '：' + '<a href="' + post.link + '" target="_blank">' + post.title + '</a></div>';
var popup = new OpenLayers.Popup.FramedCloud("featurePopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100, 100),
content,
null, true, close_popup);
popup.calculateRelativePosition = function() { return "bl"; };
feature.popup = popup;
popup.feature = feature;
map.addPopup(popup);
} else {
var popup = feature.popup;
// popup.feature = null;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
// ﾍﾟｰｼﾞの読み込みが終わったら､地図表示の処理を行う
window.addEventListener("DOMContentLoaded", display_map);
})();
</script>
<?php else: ?>
該当する店舗はありませんでした｡
<?php endif; ?>
<?php else: ?>
地域を入力してください｡
<?php endif; ?>
<!-- ★ ｽﾀｲﾙの調整 -->
<style>
/* 地図領域と地図のｻｲｽﾞが合わないとき : Google Maps は API が設定する */
#map {
position: relative;
overflow: hidden;
}
/* style.css の指定が影響して､吹き出しが正しく表示されない */
#map .olPopup img {
max-width: none;
}
</style>
||<
mocchiさんのｺﾒﾝﾄ
今回教えていただいたことを踏まえて､上記のｺ?ﾄﾞを改変し､SSLﾍﾟ?ｼﾞに対応させたつもりのものが以下となりまして､問題の箇所をakuma3さんにご指摘いただきたく､よろしくお願いします｡
>|php|
<?php
$place = $_POST['place'];
$cc = $_POST['cc'];
if ($cc) {
foreach ($cc as $v) {
$cc_stat[$v] = 'checked';
}
}
?>
<style>
form label {
margin-right: 2ex;
}
</style>
<form action="" method="post">
検索したい地域 <input type="text" name="place" value="<?php echo $place ?>">
<!-- ｶﾃｺﾞﾘｰの指定 -->
<label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食 </label>
<label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係 </label>
<label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ﾌｧｯｼｮﾝ関係 </label>
<label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ﾍﾟｯﾄ関係 </label>
<br>
<input type="submit" name="send" value="検索">
</form>
<script type="text/javascript" src="https://openlayers.org/api/2.13.1/OpenLayers.js"></script>
<?php
if ($place):
$args = Array(
'post_type' => 'post',
'posts_per_page' => -1,
'meta_query' => array(array(
'key' => 'address',
'value' => $place,
'compare' => 'LIKE'
))
);
// ｶﾃｺﾞﾘｰのどれかにﾁｪｯｸが入っていたら､検索条件を追加する
$cc = $_POST['cc'];
if (sizeof($cc) > 0) {
$args['category__in'] = $cc;
}
$the_query = new WP_Query($args);
if ($the_query->have_posts()):
?>
<div id="map" style="width: 99%; height: 650px;"></div>
<script type="text/javascript">
(function() { // ★ こんなので､くるんでみる
var posts = [];
<?php while ($the_query->have_posts()) :
$the_query->the_post();
$googlemap = get_field('lat');
if (! $googlemap) { // ﾏｯﾌﾟ住所が登録されていないこともある
continue;
}
$category = get_the_category();
?>
posts.push({
lat: '<?php echo post_custom("lat")?>',
lng: '<?php echo post_custom("lon")?>',
name: '<?php echo post_custom("Name")?>',
link: '<?php the_permalink();?>',
title: '<?php the_title(); ?>',
cat_id: '<?php echo $category[0]->category_nicename; ?>'
});
<?php endwhile; // End the loop. Whew. ?>
// ★ これ以降､OpenLayers API を使うように､ばっさりと書き換え
var map;
var select;
function display_map() {
// ﾏｰｶｰとﾂｰﾙﾁｯﾌﾟを､店舗情報毎に設定するための overlay
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: '${marker_image}',
graphicWidth: 21,
graphicHeight: 25,
graphicYOffset: -25,
cursor: "pointer",
title: '${tooltip}',
})
});
var icon_map = {
2: "https://hogehoge.com/images/2.png",
3: "https://hogehoge.com/images/3.png",
4: "https://hogehoge.com/images/4.png",
5: "https://hogehoge.com/images/5.png",
};
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg3857 = new OpenLayers.Projection("EPSG:3857");
// ﾏｰｶｰの生成
var features = [];
for (var i in posts) {
var post = posts[i];
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(post.lng, post.lat)
.transform(epsg4326, epsg3857), {
tooltip: post.title,
marker_image: icon_map[ post.cat_id ],
post: post,
}
));
}
overlay.addFeatures(features);
overlay.events.on({
'featureclick': function(evt) {
toggle_popup(evt.feature);
},
});
// ﾏｯﾌﾟの生成
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,
});
// ﾏｰｶｰのｸﾘｯｸ状態を取得するために､SelectFeature なるものを作る
select = new OpenLayers.Control.SelectFeature(overlay);
map.addControl(select);
select.activate();
// ﾏｰｶｰが含まれる範囲の Bounds と､それに合わせたｽﾞｰﾐﾝｸﾞ
var bounds = new OpenLayers.Bounds();
for (var i in posts) {
bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat));
}
bounds.transform(epsg4326, epsg3857);
map.zoomToExtent(bounds);
// ｽﾞｰﾑの最大値は 16 まで
if (map.getZoom() > 16) {
map.zoomTo(16);
}
}
// 吹き出しの｢×｣を押したときの処理
function close_popup(evt) {
toggle_popup(this.feature);
}
// ﾏｰｶｰをｸﾘｯｸしたときに吹き出しの表示を切り替える
function toggle_popup(feature) {
if (! feature.popup) {
var post = feature.attributes.post;
var content = '<div>' + post.name + '：' + '<a href="' + post.link + '" target="_blank">' + post.title + '</a></div>';
var popup = new OpenLayers.Popup.FramedCloud("featurePopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100, 100),
content,
null, true, close_popup);
popup.calculateRelativePosition = function() { return "bl"; };
feature.popup = popup;
popup.feature = feature;
map.addPopup(popup);
} else {
var popup = feature.popup;
// popup.feature = null;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
// ﾍﾟｰｼﾞの読み込みが終わったら､地図表示の処理を行う
window.addEventListener("DOMContentLoaded", display_map);
})();
</script>
<?php else: ?>
該当する店舗はありませんでした｡
<?php endif; ?>
<?php else: ?>
地域を入力してください｡
<?php endif; ?>
<!-- ★ ｽﾀｲﾙの調整 -->
<style>
/* 地図領域と地図のｻｲｽﾞが合わないとき : Google Maps は API が設定する */
#map {
position: relative;
overflow: hidden;
}
/* style.css の指定が影響して､吹き出しが正しく表示されない */
#map .olPopup img {
max-width: none;
}
</style>
||<
入力ﾌｫ?ﾑに条件を入力し､それに合致しているものがあればﾏｯﾌﾟが表示され､ﾏ?ｶ?が現れるはずなのですが､条件が合致していたとしてもﾏｯﾌﾟが現れず｢該当する店舗はありませんでした｡｣と表示されてしまいます｡
どこがﾏｽﾞいのかわからず､あれから考え込んでおりまして､ご指摘いただければ嬉しいです｡
よろしくお願いいたします｡
a-kuma3さんのｺﾒﾝﾄ
>>
条件が合致していたとしてもﾏｯﾌﾟが現れず｢該当する店舗はありませんでした｡｣と表示されてしまいます｡
<<
これは､今回の質問の回答とは関係ないところに問題があるのだと思います｡
php の方の大枠は､こういう構造になってます｡
>|php|
<?php
$place = $_POST['place'];
...
ここで､検索ﾌｫｰﾑ
?>
<?php
if ($place):
...
$the_query = new WP_Query($args);
if ($the_query->have_posts()): // ★ここの判定が false (偽) だから
...
<?php else: ?>
該当する店舗はありませんでした｡ // ★これが表示されている
<?php endif; ?>
<?php else: ?>
地域を入力してください｡
<?php endif; ?>
?>
||<
この質問では､javascript のﾚﾍﾞﾙで SSL に対応していないところがある､というところに原因がありましたが､こちらの方は php のﾚﾍﾞﾙで､期待したところを通っていないところに問題がありそうです｡
ちなみに､この質問の回答を取り込んだところにも問題はありそうですが､｢ﾏｰｶｰをｸﾘｯｸしても､吹き出しが表示されない｣というような挙動になるので､まずは｢該当する店舗がありませんでした｣の方の問題を解決してから考えた方が良いと思います｡
ちなみに､現在のぼくのIDでは､[http://q.hatena.ne.jp/1491088199#c292002:title=ﾎﾟｲﾝﾄ付きﾒｯｾｰｼﾞが受け取れない状態になっている]ようなので､ﾎﾟｲﾝﾄのことはお気になさらずに｡
mocchiさんのｺﾒﾝﾄ
ｺﾒﾝﾄありがとうございます｡
ﾃｽﾄ環境で問題はないものの､本番環境(SSLｻｲﾄ)に持ってきたときにはpost(投稿)の条件が違うから､期待したところを通らない､という理解でいいものでしょうか｡
であれば､本番環境の方をﾃｽﾄ環境に一致させる､という手で解決していこうと思います｡
さすがにこのｺ?ﾄﾞをいじることはできずにいます｡
おっしゃる通り､｢該当する店舗がありませんでした｣問題の解決が優先ですね｡
うむ?｡
a-kuma3さんのｺﾒﾝﾄ
本番環境を見ていないので､確実なことは言えませんが､ｺﾒﾝﾄで書かれた状況は｢SSL だと地図が表示されない｣とは別の問題のように思います｡
mocchiさんのｺﾒﾝﾄ
ﾃｽﾄ環境と本番環境を全く揃えてﾃｽﾄを行っています｡
条件が合致しないときは｢該当する店舗がありませんでした｣が表示されますが､条件が合う店舗があった場合､画面にﾏｯﾌﾟを読み込んでいるような挙動になります(白い画面ですが)｡
ｶﾃｺﾞﾘ?もｶﾃｺﾞﾘ?ｽﾗｯｸﾞもまったく同じものにして､ﾃｽﾄを行ったところ､どうもｶﾃｺﾞﾘ?が動いているものがあるらしいのです｡
例えばﾌｧｯｼｮﾝｶﾃｺﾞﾘ?は大丈夫なのですが､飲食で登録しているはずの店舗がﾍﾟｯﾄ関係にﾁｪｯｸを入れた時に表示され(たような挙動になり)ます｡飲食と家ｶﾃｺﾞﾘ?が効かない感じです｡
ｶﾃｺﾞﾘ?はｶﾃｺﾞﾘ?IDではなくｽﾗｯｸﾞで取得しているはずなので首をかしげています｡
飲食と家ｶﾃｺﾞﾘ?に登録してある店舗はどこにﾁｪｯｸをいれても表示されませんが､どこにもﾁｪｯｸを入れずに検索するとﾏｯﾌﾟが読み込まれるような動作をしますので､やはりﾈｯｸはｶﾃｺﾞﾘ?の移動？だと今のところ断定しております｡
それにしてもすぐにお返事がいただけ､すごく心強いです｡
これさえ完成すればしたかったことが完成するのでﾜｸﾜｸしつつﾃｽﾄしています｡
mocchiさんのｺﾒﾝﾄ
ちなみに､本番環境のｺ?ﾄﾞを以下にｺﾋﾟﾍﾟします(SSL対応は二の次にするとして､いったん仮ｻｲﾄのものを丸ｺﾋﾟﾍﾟしてる状態です)｡
>|php|
<?php
/*
Template Name: map
*/
?>
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
<!--＊＊＊＊＊＊＊＊＊＊＊＊＊ ﾃﾝﾌﾟﾚ?ﾄ編集ｽﾀ?ﾄ ＊＊＊＊＊＊＊＊＊＊＊＊＊-->
<?php
if (have_posts()) {
while (have_posts()) {
the_post();
get_template_part('content', 'page');
}
}
?>
<br><br>
<?php
$place = $_POST['place'];
$cc = $_POST['cc'];
if ($cc) {
foreach ($cc as $v) {
$cc_stat[$v] = 'checked';
}
}
?>
<style>
form label {
margin-right: 2ex;
}
</style>
<form action="" method="post">
検索したい地域 <input type="text" name="place" value="<?php echo $place ?>">
<!-- ｶﾃｺﾞﾘｰの指定 -->
<label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食 </label>
<label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係 </label>
<label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ﾌｧｯｼｮﾝ関係 </label>
<label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ﾍﾟｯﾄ関係 </label>
<br>
<input type="submit" name="send" value="検索">
</form>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<?php
if ($place):
$args = Array(
'post_type' => 'post',
'posts_per_page' => -1,
'meta_query' => array(array(
'key' => 'address',
'value' => $place,
'compare' => 'LIKE'
))
);
// ｶﾃｺﾞﾘｰのどれかにﾁｪｯｸが入っていたら､検索条件を追加する
$cc = $_POST['cc'];
if (sizeof($cc) > 0) {
$args['category__in'] = $cc;
}
$the_query = new WP_Query($args);
if ($the_query->have_posts()):
?>
<div id="map" style="width: 99%; height: 650px;"></div>
<script type="text/javascript">
(function() { // ★ こんなので､くるんでみる
var posts = [];
<?php while ($the_query->have_posts()) :
$the_query->the_post();
$googlemap = get_field('lat');
if (! $googlemap) { // ﾏｯﾌﾟ住所が登録されていないこともある
continue;
}
$category = get_the_category();
?>
posts.push({
lat: '<?php echo post_custom("lat")?>',
lng: '<?php echo post_custom("lon")?>',
name: '<?php echo post_custom("Name")?>',
link: '<?php the_permalink();?>',
title: '<?php the_title(); ?>',
cat_id: '<?php echo $category[0]->category_nicename; ?>'
});
<?php endwhile; // End the loop. Whew. ?>
// ★ これ以降､OpenLayers API を使うように､ばっさりと書き換え
var map;
var select;
function display_map() {
// ﾏｰｶｰとﾂｰﾙﾁｯﾌﾟを､店舗情報毎に設定するための overlay
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: '${marker_image}',
graphicWidth: 21,
graphicHeight: 25,
graphicYOffset: -25,
cursor: "pointer",
title: '${tooltip}',
})
});
var icon_map = {
1: "http://dev.openlayers.org/img/marker.png",
2: "http://dev.openlayers.org/img/marker-green.png",
3: "http://dev.openlayers.org/img/marker-blue.png",
4: "http://dev.openlayers.org/img/marker-gold.png",
5: "http://dev.openlayers.org/img/marker-green.png",
};
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg3857 = new OpenLayers.Projection("EPSG:3857");
// ﾏｰｶｰの生成
var features = [];
for (var i in posts) {
var post = posts[i];
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(post.lng, post.lat)
.transform(epsg4326, epsg3857), {
tooltip: post.title,
marker_image: icon_map[ post.cat_id ],
post: post,
}
));
}
overlay.addFeatures(features);
overlay.events.on({
'featureclick': function(evt) {
toggle_popup(evt.feature);
},
});
// ﾏｯﾌﾟの生成
map = new OpenLayers.Map("map");
map.addLayers([new OpenLayers.Layer.OSM(), overlay]);
// ﾏｰｶｰのｸﾘｯｸ状態を取得するために､SelectFeature なるものを作る
select = new OpenLayers.Control.SelectFeature(overlay);
map.addControl(select);
select.activate();
// ﾏｰｶｰが含まれる範囲の Bounds と､それに合わせたｽﾞｰﾐﾝｸﾞ
var bounds = new OpenLayers.Bounds();
for (var i in posts) {
bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat));
}
bounds.transform(epsg4326, epsg3857);
map.zoomToExtent(bounds);
// ｽﾞｰﾑの最大値は 16 まで
if (map.getZoom() > 16) {
map.zoomTo(16);
}
}
// 吹き出しの｢×｣を押したときの処理
function close_popup(evt) {
toggle_popup(this.feature);
}
// ﾏｰｶｰをｸﾘｯｸしたときに吹き出しの表示を切り替える
function toggle_popup(feature) {
if (! feature.popup) {
var post = feature.attributes.post;
var content = '<div>' + post.name + '：' + '<a href="' + post.link + '" target="_blank">' + post.title + '</a></div>';
var popup = new OpenLayers.Popup.FramedCloud("featurePopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100, 100),
content,
null, true, close_popup);
popup.calculateRelativePosition = function() { return "bl"; };
feature.popup = popup;
popup.feature = feature;
map.addPopup(popup);
} else {
var popup = feature.popup;
// popup.feature = null;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
// ﾍﾟｰｼﾞの読み込みが終わったら､地図表示の処理を行う
window.addEventListener("DOMContentLoaded", display_map);
})();
</script>
<?php else: ?>
該当する店舗はありませんでした｡
<?php endif; ?>
<?php else: ?>
地域を入力してください｡
<?php endif; ?>
<!-- ★ ｽﾀｲﾙの調整 -->
<style>
/* 地図領域と地図のｻｲｽﾞが合わないとき : Google Maps は API が設定する */
#map {
position: relative;
overflow: hidden;
}
/* style.css の指定が影響して､吹き出しが正しく表示されない */
#map .olPopup img {
max-width: none;
}
</style>
<!--＊＊＊＊＊＊＊＊＊＊＊＊＊ ﾃﾝﾌﾟﾚ?ﾄ編集ここまで ＊＊＊＊＊＊＊＊＊＊＊＊＊-->
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
||<
a-kuma3さんのｺﾒﾝﾄ
>>
ｶﾃｺﾞﾘ?はｶﾃｺﾞﾘ?IDではなくｽﾗｯｸﾞで取得しているはずなので首をかしげています｡
<<
この認識が間違っているのではないでしょうか｡
ｶﾃｺﾞﾘｰの検索条件を設定する部分は､
>|perl|
// ｶﾃｺﾞﾘｰのどれかにﾁｪｯｸが入っていたら､検索条件を追加する
$cc = $_POST['cc'];
if (sizeof($cc) > 0) {
$args['category__in'] = $cc;
}
$the_query = new WP_Query($args);
||<
で､[https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query:title=WP_Query のﾏﾆｭｱﾙ]によれば､
>>
category__in (配列) - ｶﾃｺﾞﾘｰ ID を使用します｡
<<
とあります｡
mocchiさんのｺﾒﾝﾄ
ありがとうございます！
そのあたりをちょっとふまえて見直してみます｡
光明が見えてきました｡
それというのもわざわざ調べてくださったお陰様です！
mocchiさんのｺﾒﾝﾄ
ﾏｯﾌﾟは表示されませんが､思っているような動作になりました｡
ご指摘の通り､やはりｶﾃｺﾞﾘ?IDからひろっていました｡
以下のような感じで入力ﾌｫ?ﾑを変えることで､ﾃｽﾄ環境と同じ形になりました｡
ありがとうございます｡
>|php|
<form action="" method="post">
検索したい地域 <input type="text" name="place" value="<?php echo $place ?>">
<!-- ｶﾃｺﾞﾘｰの指定 -->
<label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[2] ?>>飲食 </label>
<label><input type="checkbox" name="cc[]" value="40" <?php echo $cc_stat[3] ?>>家関係 </label>
<label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ﾌｧｯｼｮﾝ関係 </label>
<label><input type="checkbox" name="cc[]" value="61" <?php echo $cc_stat[5] ?>>ﾍﾟｯﾄ関係 </label>
<br>
<input type="submit" name="send" value="検索">
</form>
||<
ありがとうございます｡
mocchiさんのｺﾒﾝﾄ
あれから教えていただいた通りのことをやってみると､ﾏｯﾌﾟが表示されました！！
ありがとうございます｡
ﾏ?ｶ?のみが表示されない状態でして､｢？？｣となっております｡
上記の入力ﾌｫ?ﾑに対して､以下のような処理でﾏ?ｶ?を生成していると思うのですが､表示されないのです
>||
// ﾏｰｶｰとﾂｰﾙﾁｯﾌﾟを､店舗情報毎に設定するための overlay
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: '${marker_image}',
graphicWidth: 21,
graphicHeight: 25,
graphicYOffset: -25,
cursor: "pointer",
title: '${tooltip}',
})
});
var icon_map = {
1: "https://hogehoge.com/images/1.png",
2: "https://hogehoge.com/images/2.png",
3: "https://hogehoge.com/images/3.png",
4: "https://hogehoge.com/images/4.png",
5: "https://hogehoge.com/images/5.png",
};
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg3857 = new OpenLayers.Projection("EPSG:3857");
// ﾏｰｶｰの生成
var features = [];
for (var i in posts) {
var post = posts[i];
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(post.lng, post.lat)
.transform(epsg4326, epsg3857), {
tooltip: post.title,
marker_image: icon_map[ post.cat_id ],
post: post,
}
));
}
overlay.addFeatures(features);
overlay.events.on({
'featureclick': function(evt) {
toggle_popup(evt.feature);
},
});
||<
ﾌﾑ?｡｡
あと一押し､ﾋﾝﾄをいただけないでしょうか｡
a-kuma3さんのｺﾒﾝﾄ
[http://q.hatena.ne.jp/1495033260#ac127084:title=このｺﾒﾝﾄ]のような感じにしているのだと思います｡
ﾏｰｶｰは､overlay という変数に追加しているのですが､その Layer が Map に追加されてないのがﾏｰｶｰが表示されない原因です｡
元々､こうなっていたﾏｯﾌﾟの生成のところを､
>|php|
<?php
...
// ﾏｯﾌﾟの生成
map = new OpenLayers.Map("map");
map.addLayers([new OpenLayers.Layer.OSM(), overlay]);
||<
以下のようにしてみてください｡
>|php|
<?php
...
// ﾏｯﾌﾟの生成
map = new OpenLayers.Map("map");
map.addLayers([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
), overlay]);
||<
mocchiさんのｺﾒﾝﾄ
表示できした！！
ありがとうございます｡これでできました！
全て解決しました｡
a-kuma3さんがいらっしゃらなかったら私ではまったく遠く及ばないことでした｡
本当にありがとうございます｡
ﾎﾟｲﾝﾄが送信できないのは一時的なことなのでしょうか｡
a-kuma3さんのｺﾒﾝﾄ
うしっ (｀･ω･´)ｷﾘｯ
>>
ﾎﾟｲﾝﾄが送信できないのは一時的なことなのでしょうか｡
<<
ぼく自身がある状態を解除すれば送信可能になるだろうとは思います｡
それは､やろうと思えばできることではあるんですが､やるつもりはないのです｡
｢表示できした！！｣で十分です <tt>:-)</tt>
mocchiさんのｺﾒﾝﾄ
ありがとうございます｡
それにしても､と言わせていただきたくなるのですが､､それではせめて､解除されたときにはご一報いただけませんでしょうか｡
そこはなんとかｸﾞｯと目をつぶって､お願いいたします｡
本当にありがとうございました｡
mocchiさんのｺﾒﾝﾄ
新たな質問でﾎﾟｲﾝﾄをお渡しできる形がいいですね｡
次のような質問を新たにしようと思っているのですが､それが可能かどうかを教えていただけませんか｡
可能であればそのまま質問を登録させていただき､a-kuma3さんに回答をいただければ嬉しいです｡
下記のような感じで質問しようと思っています｡
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
現在､以下のｺ?ﾄﾞで､取得するpostを条件づけて表示しています｡
>|php|
$args = Array(
'post_type' => 'post',
'posts_per_page' => -1,
'meta_query' => array(array(
'key' => 'address',
'value' => $place,
'compare' => 'LIKE'
),
||<
この条件ﾌﾟﾗｽ､ｶｽﾀﾑﾌｨ?ﾙﾄﾞで設定した値を使って､更に絞り込みをやってみまして､以下のｺ?ﾄﾞでそれは実現しました(ｶｽﾀﾑﾌｨ?ﾙﾄﾞhogehogeに値があれば表示)｡
>|php|
$args = Array(
'post_type' => 'post',
'posts_per_page' => -1,
'meta_query' => array(array(
'key' => 'address',
'value' => $place,
'compare' => 'LIKE'
),
array(
'key' => hogehoge",
'value' => 'null',
'compare' => '!='
),
)
);
||<
ふと､投稿者(author)にｶｽﾀﾑﾌｨ?ﾙﾄﾞを設定している場合､そのﾒﾀ情報を保持しているpostだけを表示する､ということができないものかと思い､やってみるもののうまくいきません｡
ﾚｱなｹ?ｽなのか､ｸﾞｸﾞってもよくわかりませんでした｡
上記ｺ?ﾄﾞのようにpostのｶｽﾀﾑﾌｨ?ﾙﾄﾞで絞り込むのではなく､投稿者(author)のｶｽﾀﾑﾌｨ?ﾙﾄﾞの値あるなしで絞り込むためのｺ?ﾄﾞを教えてください(AND)｡
よろしくお願いいたします｡
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
質問おわり
author meta_queryとかを使ってやってみてるんですが苦戦しておりまして､これそもそもできるのか？という疑問が(笑)｡
これってできることでしょうか｡
できるのならば後学のため質問させていただきたいです｡
mocchiさんのｺﾒﾝﾄ
ｺ?ﾄﾞ表示ﾓ?ﾄﾞにならない｡｡
a-kuma3さんのｺﾒﾝﾄ
やりたいことをｲﾏｲﾁ理解できていませんが､get_user_meta ですかね｡
- [http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_user_meta:title]
>|php|
<?php
echo "Hello, world.";
||<
さて､効いているかな...
mocchiさんのｺﾒﾝﾄ
ええ､きっとﾚｱｹ?ｽなんだと思います(笑)｡
質問させていただくのは明日になると思います｡
よろしくお願いします｡
a-kuma3さんのｺﾒﾝﾄ
答えられるかどうかは､分かりませんよ｡
WordPress どっぷりなのは､rouge_2008 さん向きなような気もします <tt>:-)</tt>
●質問をもっと探す●
0.人力検索はてなﾄｯﾌﾟ
8.このﾍﾟｰｼﾞを友達に紹介
9.このﾍﾟｰｼﾞの先頭へ
□対応機種一覧
□お問い合わせ
□ﾍﾙﾌﾟ/お知らせ
□ﾛｸﾞｲﾝ
□無料ﾕｰｻﾞｰ登録
□はてなﾄｯﾌﾟ
ﾍﾞｽﾄｱﾝｻｰ