カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

Javascript 配列

JavaScriptの配列の基本的な使い方

配列の宣言

var array = new Array();

または

var array = [];

例)

var array = new Array("a", "b", "c");
var array = ["a", "b", "c"];

要素の追加

先頭に追加する

var array = ["b", "c"];
array.unshift("a"); //["a", "b", "c"]となる

末尾に追加する

var array = ["a", "b", "c"];
array.push("d"); //["a", "b", "c", "d"]となる

配列の結合

配列を結合し新たな配列を生成します。
(元の配列はそのまま)

var array1 = ["a", "b"];
var array2 = ["c", "d"];

var array = array1.concat(array2); //["a", "b", "c", "d"]となる

続きを読む…»

327 views

描画ツールライブラリを使う GoogleMap v3

描画ツールを使うとユーザーが地図上に図形を描画することができます。
実際に使用するクラスは「DrawingManager」になります。

このツールは独立したAPIなので、別途使用することを明記しなくてはなりません。
API読み込みの際にパラメータを追加します。

GoogleMapAPI version 3.26

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=drawing">
</script>

実装方法は以下のようになります。

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

様々なオプションを指定して実装する

drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER, //CIRCLE, MARKER, POLYGON, POLYLINE, RECTANGLE
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['polygon', 'rectangle'] //['marker', 'polyline', 'rectangle', 'circle', 'polygon']
    },
    polygonOptions: {
        fillColor: '#999999',
        fillOpacity: 0.5,
        strokeWeight: 3,
        clickable: false,
        editable: true,
        zIndex: 1
    },
    rectangleOptions: {
        fillColor: '#999999',
        fillOpacity: 0.5,
        strokeWeight: 3,
        clickable: false,
        editable: true,
        zIndex: 1
    }
});
drawingManager.setMap(map);

続きを読む…»

284 views

jQueryプラグイン「bxSlider」を使う

スライドショーを実装してくれる「bxSlider」をご紹介します。
これまでにもスライドショーを実装できる色々なプラグインをご紹介しましたが、
最近はこれをよく使います。

bxSlider

まずはjQueryを読み込む。

<script src="./jquery-1.9.1.min.js"></script>

※ちなみに、jQueryが3.1.1だとエラーが発生しました。

続いてbxSliderのファイルを読み込みます。

<link href="./bxslider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="./bxslider/jquery.bxslider.min.js"></script>

スライドさせたい内容を用意します。

<ul class="bxslider">

    <li>
        <img src="./images/exam_picture1.jpg">
    </li>

    <li>
        <img src="./images/exam_picture2.jpg">
    </li>

    <li>
        <img src="./images/exam_picture3.jpg">
    </li>

</ul>

まずは簡単に実装してみましょう。

<script type="text/javascript">
<!--//
(function($) {
    $(document).ready(function(){

        $('.bxslider').bxSlider({
            auto: true,
            autoHover: true,
        });

    });
})(jQuery);
//-->
</script>

続きを読む…»

371 views

jQueryプラグイン Slider Pro

スライドショーを実装してくれるプラグインです。
IEでも動作し、レスポンシブにも対応しています。

JavaScriptライブラリをダウンロード
jQuery
Slider Pro

まずjQueryは必須です。

<script src="./jquery-1.9.1.min.js"></script>

次にSlider ProのスタイルシートやJSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/slider-pro.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/examples.css" media="screen">

<script type="text/javascript" src="./slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>

HTMLを記述します。

<div id="mySlider" class="mySlider slider-pro">

    <div class="sp-slides">

        <div class="sp-slide">

            <img class="sp-image" src="./slider-pro-master/src/css/images/blank.gif" data-src="[画像パス]" data-small="[サムネイル画像パス]">

            <p class="sp-layer sp-white sp-padding" data-horizontal="0" data-vertical="0" data-show-transition="left" data-show-delay="400">
                表示したいキャプション
            </p>

        </div>

    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="[サムネイル画像パス]">
    </div>

</div>

キャプション部分のクラスとパラメーター

クラス
sp-layer キャプションを表示
sp-white 白背景に黒文字
sp-padding 10pxのパディングを設定
パラメーター
data-horizontal 水平固定位置を指定。数値、もしくはパーセンテージ。
data-vertical 垂直固定位置を指定。数値、もしくはパーセンテージ。
data-show-transition スライドの方向。(left, right, up, down)
data-show-delay 自動再生のスライド切り替え時間。単位:10ミリ秒

続きを読む…»

2,864 views

GoogleMaps API 標高の取得

GoogleMapのGoogle Maps Elevation APIを使用して標高を取得することができます。
利用にはAPIキーが必須です。詳しくは、[GoogleMap ブラウザAPIキーの取得]を参照してください。

座標オブジェクトを作成します。

var location = new google.maps.LatLng(35.7100627, 139.8085064);

リクエストパラメータを作成します。
座標オブジェウトを配列にします。

var request = { locations: new Array(location) };

ElevationServiceクラスのインスタンスを作成します。

var myElevation = new google.maps.ElevationService();

getElevationForLocationsメソッドを使って標高を取得します。

myElevation.getElevationForLocations(request, function(response, status) {

    if(status == google.maps.ElevationStatus.OK) {

        alert(response[0].elevation + "m");

    } else {

        alert("取得できませんでした。");

    }

});

公式リファレンス:Google Maps Elevation API
https://developers.google.com/maps/documentation/elevation/intro?hl=ja

555 views