質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
mBaaS

mBaaSとはモバイルアプリケーションでの利用に特化したBaaSです。スマートフォン向けのWebアプリケーションが必要とするサーバ側の様々な機能をインターネットを通じてサービスとして提供しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

2133閲覧

グーグルマップで、ピンをタップしたらニフティクラウドのデータストアからデータを持ってくる処理がしたい

yuyuyudaria

総合スコア7

mBaaS

mBaaSとはモバイルアプリケーションでの利用に特化したBaaSです。スマートフォン向けのWebアプリケーションが必要とするサーバ側の様々な機能をインターネットを通じてサービスとして提供しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2016/11/03 07:02

編集2022/01/12 10:55

グーグルマップのピンをタップしたらニフティクラウドのデータストアからデータを持ってくるというような処理をしたいです。
情報が不確かなのですが、参考にしたサンプルコードが2014年のもので、SDKの更新が去年の秋くらいにあったらしく、それがもしかしたら関係しているのかもしれません。

初心者でどこが変なのかがわからなく、コードが長くなって大変申し訳ないのですが、是非ともよろしくお願いいたします。

追記

エラーは出ておらず、ピンをタップしたら位置データをデータストアから持ってくるようにしたいのですが、コードのどこがおかしくてデータを持ってこれないのかがわかりません。
実行結果は以下のようになっております。
実行結果のスクリーンショット

参考にしたサイト> http://mb.cloud.nifty.com/doc/current/tutorial/monaca_checkIn.html

JavaScript

1 2$(function(){ 3 //起動時にmobile backend APIキーを設定 4 $.getJSON("setting.json", function(data) { 5 NCMB.initialize( 6 data.application_key, 7 data.client_key 8 ); 9 }); 10}); 11 12//位置情報取得に成功した場合のコールバック 13var onSuccess = function(position){ 14 var current = new CurrentPoint(); 15 current.distance = CurrentPoint.distance; //検索範囲の半径を保持する 16 current.geopoint = position.coords; //位置情報を保存する 17 search(current); 18}; 19 20//位置情報取得に失敗した場合のコールバック 21var onError = function(error){ 22 console.log("現在位置を取得できませんでした"); 23}; 24 25//位置情報取得時に設定するオプション 26var option = { 27 timeout: 60000 //タイムアウト値(ミリ秒) 28}; 29 30//現在地を取得する 31function find(){ 32 CurrentPoint.distance = 5; //検索距離を5kmに設定 33 navigator.geolocation.getCurrentPosition(onSuccess, onError, option); 34} 35 36//画像をアップロードする 37function upload(){ 38} 39 40//現在地を保持するクラスを作成 41function CurrentPoint(){ 42 geopoint=null; //端末の位置情報を保持する 43 distance=0; //位置情報検索に利用するための検索距離を指定する 44} 45 46//mobile backendから位置情報を検索するメソッド 47function search(current){ 48 //位置情報を検索するクラスのNCMB.Objectを作成する 49 var SpotClass = NCMB.Object.extend("Spot"); 50 var spot = new SpotClass(); 51 //NCMB.Queryを作成 52 var query = new NCMB.Query(SpotClass); 53 //位置情報をもとに検索する条件を設定 54 var geoPoint = new NCMB.GeoPoint(current.geopoint.latitude,current.geopoint.longitude); 55 query.withinKilometers("geo", geoPoint, current.distance); 56 57 //mobile backend上のデータ検索を実行する 58 query.find({ 59 success: function(points) { 60 61 62 $("#result").html(""); 63 // 検索が成功した場合の処理 64 65 for (var i = 0; i < points.length; i++){ 66 var point = points[i]; 67 $("#result").append("<p>スポット名:" + point.get("name") + "</p>"); 68 } 69 70 71 //Google mapの設定 72 var mapOptions = { 73 //中心地設定 74 center: new google.maps.LatLng(current.geopoint.latitude,current.geopoint.longitude), 75 //ズーム設定 76 zoom: 15, 77 //地図のタイプを指定 78 mapTypeId: google.maps.MapTypeId.ROADMAP 79 }; 80 81 //idがmap_canvasのところにGoogle mapを表示 82 var map = new google.maps.Map(document.getElementById("map_canvas"), 83 mapOptions); 84 85 for (var i = 0; i < points.length; i++){ 86 var point = points[i]; 87 console.log("<p>店名:" + point.get("name") + "</p>"); 88 89 //位置情報オブジェクトを作成 90 var location = point.get("geo"); 91 var myLatlng = new google.maps.LatLng(location.latitude,location.longitude); 92 93 //店舗名、位置情報、Google mapオブジェクトを指定してマーカー作成メソッドを呼び出し 94 markToMap(point.get("name"), myLatlng, map); 95 //markToMap("waaaaaaaaaaaaa", myLatlng, map); 96 } 97 function markToMap(name, position, map){ 98 var marker = new google.maps.Marker({ 99 position: position, 100 title:name 101 }); 102 marker.setMap(map); 103 google.maps.event.addListener(marker, 'click', function() { 104 105 var test = '<a href = "page3.html">' + name + '</a>'; 106 var imgPull; 107 108 spot.equalTo("geo", position).fetchAll().then(function(results) { 109 imgPull = results[0].get('img'); 110 console.log("おっけー"); 111 }); 112 113 var infowindow = new google.maps.InfoWindow({ 114 //content:marker.title 115 content: test, 116 //content: '<ons-button onclick="myNavigator.pushPage('page3.html')">スポットを登録</ons-button>' 117 118 //content: '<b>aaaa</b>' 119 }); 120 infowindow.open(map,marker); 121 }); 122 } 123 124 }, 125 error: function(error) { 126 // 検索に失敗した場合の処理 127 console.log(error.message); 128 } 129 }); 130} 131 132//スポットを登録する 133function saveSpot(){ 134 //位置情報が取得できたときの処理 135 var onSuccess = function (location){ 136 137 //記事内容を取得 138 var title = $("#name").val(); 139 140 //位置情報オブジェクトを作成 141 var geoPoint = new NCMB.GeoPoint(location.coords.latitude, location.coords.longitude); 142 143 //Spotクラスのインスタンスを作成★ 144 var SpotClass = NCMB.Object.extend("Spot"); 145 var spot = new SpotClass(); 146 147 //値を設定★ 148 spot.set("name",title); 149 spot.set("geo",geoPoint); 150 151 //保存を実行★ 152 spot.save(); 153 154 //前のページに戻る 155 myNavigator.popPage(); 156 } 157 158 //位置情報取得に失敗した場合の処理 159 var onError = function(error){ 160 console.log("error:" + error.message); 161 } 162 163 var option = { 164 timeout: 60000 //タイムアウト値(ミリ秒) 165 }; 166 167 //位置情報を取得 168 navigator.geolocation.getCurrentPosition(onSuccess, onError, option); 169 //マーカー 170 171 172}

以下の部分が位置情報を持ってくる記述になります。
成功した場合にconsole logに表記がされるように記述しているのですが、何も表示されません。

JavaScript

1 //店舗名、位置情報、Google mapオブジェクトを指定してマーカー作成メソッドを呼び出し 2 markToMap(point.get("name"), myLatlng, map); 3 } 4 function markToMap(name, position, map){ 5 var marker = new google.maps.Marker({ 6 position: position, 7 title:name 8 }); 9 marker.setMap(map); 10 google.maps.event.addListener(marker, 'click', function() { 11 12 var test = '<a href = "page3.html">' + name + '</a>'; 13 var imgPull; 14 15 spot.equalTo("geo", position).fetchAll().then(function(results) { 16 imgPull = results[0].get('img'); 17 console.log("おっけー"); 18 }); 19 20 var infowindow = new google.maps.InfoWindow({ 21 //content:marker.title 22 content: test, 23 //content: '<ons-button onclick="myNavigator.pushPage('page3.html')">スポットを登録</ons-button>' 24 25 //content: '<b>aaaa</b>' 26 }); 27 infowindow.open(map,marker); 28 }); 29 } 30 31 }, 32 error: function(error) { 33 // 検索に失敗した場合の処理 34 console.log(error.message); 35 } 36 }); 37} 38

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/11/03 08:10

何がわからないか、エラーは出ていないのか、出力できているなら結果はどうなっているかなど、具体的に質問文に追記いただいたほうが回答を得られやすいと思います。
kei344

2016/11/03 09:56

「位置データをデータストアから持ってくる」とはどこの部分で実装されているのでしょうか。
guest

回答1

0

equalToなどの仕様がわかりませんが、spot.equalTo("geo", position) はpositionオブジェクトを引き数に渡していますが、オブジェクトを比較できるものなのですか?リファレンスを確認されてみてはいかがでしょうか。

投稿2016/11/03 12:24

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問