happylife

ホームページの作り方に関する備忘録です

mb2

Google Maps APIで距離を調べる方法

Googleマップの埋め込みの色々な方法

https://appli-world.jp/posts/75

【緯度経度の確認】

Googleマップで緯度と経度の確認、入力

https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop&hl=ja

リンクPC、スマホ別で緯度経度を確認する

https://www.wikihow.jp/Googleマップで緯度経度を確認する

ウェブ地図で緯度経度を確認 (Leaflet版)

https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/coordinates/advanced.html

【コード参考サイト】

GOOGLE MAPで中間地点も取得し表示する

https://qiita.com/nissuk/items/7e0225ae3764d9f1bef7

Google Mapsで2地点間の経路を表示する

https://qiita.com/aosho235/items/c24ae08f5850b69fadf0

Google Maps API V3で距離を表示する方法

https://www.logical-arts.jp/archives/226

地図上をクリックして移動距離を算出

https://www.nanchatte.com/map/computeDistance.html

Mapをクリックしてマーカーを立てる

https://qiita.com/Kenta-Han/items/1a009ca82eacb91bffd3

【各メソッドのオプション】

各メソッドのオプション

http://cly7796.net/wp/javascript/try-to-use-the-google-maps-api/

完成したコード

WordPressnの記事内でHTMLタグをテキストとして表示する方法は?

<p>ビジュアルモードで入力すればOK!

THMLタグをテキストとして表示

jQueryで要素を順番にフェードさせ表示する

自作すると短いコードで作れると思ったら長くなった。。。

【html】
<div class=”container fade_group”>
<ul>
<li>〇〇〇〇〇</li>
<li>◆◆◆◆◆</li>
<li>△△△△△</li>
</ul>
<img src=”&lt;?php echo get_template_directory_uri(); ?&gt;/images/topimage.jpg” alt=”topimage” />
</div>
<!– mainvisual –>

【css】
.container {
width: 500px;
height: 500px;
}
.fade_group ul {
position: relative;
}
.fade_group li {
position: absolute;
top: 0;
left: 0;
}
.fade_group img {
width: 960px;
height: 400px;
}


【js】
$(function() {
‘use strict’;
// 順番にフェードイン
var fadeInList = $(‘.mainvisual li’); // フェードインさせる全ての画像の取得
var fadeSet;
fadeInList.hide(); //全ての画像を非表示
// フェードイン起動関数の定義
function fadeStart() {
// フェード処理
function fade() {
fadeInList.fadeOut(2000); // フェードアウトにかかる時間
fadeInList.eq(i).fadeIn(2000); // フェードインにかかる時間
i++;
}
// 切り替わり順番にかかる時間
var i = 0;
fadeSet = setInterval(function() { // 2000ミリ秒間隔で切り替わり
if(i == fadeInList.length) { // 最後の画像を表示した時
i = 0; // 最初の画像に戻す
fade();
} else {
fade();
}
},2000);
}
fadeStart(); // フェードイン起動関数
// フェードイン停止関数の定義
function fadeStop() {
setTimeout(function() { // 15000ミリ秒後に停止処理
clearInterval(fadeSet); // フェードイン停止処理
},15000);
}
fadeStop(); // フェードイン停止関数
});

ここの方が断然良くて、コードも短い
https://on-ze.com/archives/1388

PAGE TOP