Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Monaca x NIFTY Cloud mobile backend 位置情報検索サンプル

More than 5 years have passed since last update.

Monaca x NIFTY Cloud mobile backend 位置情報検索サンプル

Overview

元の記事:リンク

Monacaを用いて作ったアプリから、mobile backendと連携して、位置情報データを検索しGoogle Map地図上に表示するサンプルコードとなります。
* HTML/CSS/JavaScriptでマルチプラットフォーム(iOS/Android/Windowsなど)にアプリを開発できる統合開発環境Monaca
* スマホアプリのサーバ側機能(プッシュ通知、会員管理、DBなど)をサーバ開発不要で実装できるNIFTY Cloud mobile backend

overview

Demo

demo2

  • 位置情報検索を行い、データを表示

demo1

Requirement

  • Monaca環境
  • Nifty cloud mobile backend Javascript SDK version 2.0.2 ダウンロード:Javascript SDK

Installation

mBaaSデータストアにて、作成 > インポートを選択し、ダウンロードしたjsonファイルを指定してインポートする。
import1

import2

インポートが成功した状態
import3

  • Monacaで作成したアプリをmobile backendサーバーと連携させる

    • Monacaでアプリキー、クライアントキーを設定し、初期化を行う initialize2 キーをコピーし、追記します。 initialize
  • Google map API キーの設定

google key

  • 動作確認
    • Monacaで動作確認する

demo

Description

  • コードの説明

File: www/js/app.js

  • 初期化設定
var appKey    = "YOUR_APPKEY";
var clientKey = "YOUR_CLIENTKEY";
var storeClassName = "Shop";
var ncmb = new NCMB(appKey,clientKey);

上記のコードでアプリケーションキーとクライアントキーを指定し、
NCMB(appKey, clientKey) でmBaaSサーバと連携を行います。

  • 現在地取得

「地図でお店を見る」ボタンの処理メソッドは、以下のように実装しています。

navigator.geolocation.getCurrentPosition(onSuccess, onError, null);
  • 現在地取得が成功した場合のコールバック、onSuccessは以下のように設定しています。
var onSuccess = function(position){
    var location = { lat: position.coords.latitude, lng: position.coords.longitude};
    //mobile backendに登録しているストアを取得し、地図で表示
    //位置情報を検索するクラスのNCMB.Objectを作成する
    var StoreClass = ncmb.DataStore(storeClassName);
    //位置情報をもとに検索する条件を設定
    var geoPoint = ncmb.GeoPoint(location.lat, location.lng);
    var mapOptions = {
                    center: location,
                    zoom: 14
                };
    var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    //現在地を地図に追加
    markToMap("現在地", location, map, null);
    //mobile backend上のデータ検索を実行する
    StoreClass.withinKilometers("geolocation", geoPoint, 5)
              .fetchAll()
              .then(function(stores) {
                  // 検索が成功した場合の処理
                  for (var i = 0; i < stores.length; i++){
                      var store = stores[i];
                      var storeLocation = store.get("geolocation");
                      var myLatlng = new google.maps.LatLng(storeLocation.latitude, storeLocation.longitude);
                      //CREATE DETAIL
                      var detail = "";
                      var storeName = store.get("name");
                      detail += "<h2>"+ storeName +"</h2>";
                      var storeCapacity = store.get("capacity");
                      var storeLocation = store.get("geolocation");
                      var storeLatLng = new google.maps.LatLng(storeLocation.latitude,storeLocation.longitude);
                      var locationLatLng = new google.maps.LatLng(location.lat,location.lng);
                      var distance = Math.round(google.maps.geometry.spherical.computeDistanceBetween (locationLatLng, storeLatLng));
                      detail += "<p>距離: "+ distance + "(m)</p>";
                      detail += "<p>席数: " + storeCapacity + "</p>" ;
                      markToMap(detail, myLatlng, map, 'images/marker_mbaas.png');
                  }
               })
              .catch(function(error) {
                 // 検索に失敗した場合の処理
                 alert(error.message);
              });
};

"Shop"というクラスのデーターを検索するため、StoreClassのfetchAllメソッドを利用します。
検索条件は StoreClass.withinKilometers("geolocation", geoPoint, 5); と設定し、geolocationというクラスの中にある、現在地(geoPoint)から5kmの範囲のキーの値を検索します。
fetchAll()メソッドを利用し、非同期にて検索を行います。

fetchAll()した後のプロミスを定義します。成功した場合にはstoresにデータが入っているはずなので、markToMap()メソッドを利用して、地図にマーカーを付けます。

Usage

サンプルコードをカスタマイズすることで、様々な機能を実装できます!
データ保存・データ検索・会員管理・プッシュ通知などの機能を実装したい場合には、
以下のドキュメントもご参考ください。

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

  • MITライセンス
  • NIFTY Cloud mobile backendのJavascript SDKのライセンス
fjct
クラウド・IoT 関連サービスを開発・提供している企業です。(こちらは、富士通クラウドテクノロジーズの有志にて運営しております。)
https://fjct.fujitsu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away