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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4139閲覧

google mapの地図上の2点の半径を表示させ、点同士の距離が4km以内だった時に、”出店不可”4km以上だった時に”出店可”を返したい

yahret45

総合スコア41

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

0クリップ

投稿2016/04/20 11:24

編集2016/04/20 11:33

google map APIを利用して、地図上の2点の半径を表示させ、点同士の距離が4km以内だった時に、”出店不可”4km以上だった時に”出店可”を返したいです。

現状、googleマップで、緯度経度を指定した箇所にピンを置き、半径◯mの円を引く機能まで実現する所までが出来たのですが、

1.2点目以降の地図のピンと半径を置く
2.点同士の距離が4km以内だった時に、”出店不可”4km以上だった時に”出店可”を返す

の2つが出来ておりません。
お知恵をお貸し頂けますと幸いです。
何卒よろしくお願いします。

javascript

1<body> 2 <!-- Map --> 3 <p class="bar"> 4 <input type="text" name="name" size="30" maxlength="20"> 5 </p> 6 7 <div id="map"></div> 8 9 <!-- Map --> 10 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 11 12 <!-- <div id="map"></div>--> 13 <script type="text/javascript"> 14 var map; 15 console.log(document.getElementById('map')); 16 17 function initMap() { 18 var latlng = new google.maps.LatLng(35.681382, 139.766084); 19 var marker = new google.maps.Marker({ 20 position: latlng, 21 map: map 22 }); 23 var marker2 = new google.maps.Marker({ 24 position: {lat: 35.681382, lng: 139.766084}, 25 map: map, 26 title: 'Hello World!' 27 }); 28 29 // map = new Map( elem, obj ); 30 31 map = new google.maps.Map(document.getElementById('map'), { 32 zoom: 12, 33 center: latlng, 34 mapTypeId: google.maps.MapTypeId.ROADMAP, 35 scaleControl: true, 36 scrollwheel: true 37 }); 38 39 new google.maps.Circle({ 40 center: latlng, 41 fillColor: '#ff0000', 42 fillOpacity: 0.5, 43 map: map, 44 radius: 2000, 45 strokeColor: '#ff0000', 46 strokeOpacity: 1, 47 strokeWeight: 1 48 }); 49 } 50 </script> 51 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5o9PRJhKBWmTMFb_Ep62sfDWrMPbdGu8&callback=initMap"> 52 </script> 53</body> 54
5o5o_wagon👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

前の回答に引き続き失礼いたします。
なるほど…実は複雑なことをしたかった訳ですね…。
しかしながら、個人的におもしろそうだったので、ちょっとコードを書いてみました。

te2jiさんの回答を受けて、「点同士の距離を測る」方法で作成してみました。
こんな感じでどうでしょうか?

<!-- Map --> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5o9PRJhKBWmTMFb_Ep62sfDWrMPbdGu8&callback=initMap"></script> <!-- googleMap APIは先に読み込んでおいたほうが良いかと --> <script type="text/javascript"> // 距離計算関数 function calcDistance(lat_1, lng_1, lat_2, lng_2) { // 測地系定数 // GRS80 ( 世界測地系 ) <- 現在の日本での標準 var RX = 6378137.000000 // 赤道半径 var RY = 6356752.314140 // 極半径 // 2点の経度の差を計算 ( ラジアン ) var a_x = lng_1 * Math.PI / 180 - lng_2 * Math.PI / 180; // 2点の緯度の差を計算 ( ラジアン ) var a_y = lat_1 * Math.PI / 180 - lat_2 * Math.PI / 180; // 2点の緯度の平均を計算 var p = (lat_1 * Math.PI / 180 + lat_2 * Math.PI / 180) / 2; // 離心率を計算 var e = Math.sqrt((RX * RX - RY * RY) / (RX * RX)); // 子午線・卯酉線曲率半径の分母Wを計算 var w = Math.sqrt(1 - e * e * Math.sin(p) * Math.sin(p)); // 子午線曲率半径を計算 var m = RX * (1 - e * e) / (w * w * w); // 卯酉線曲率半径を計算 var n = RX / w; // 距離を計算 var d = Math.pow(a_y * m, 2) + Math.pow(a_x * n * Math.cos(p), 2); d = Math.round(Math.sqrt(d)) / 1000; return d; } function initMap() { //マーカーを配置したい座標をオブジェクトで配列にまとめておく var latlngArr = [ { lat: '35.681382' , lng: '139.766084' }, { lat: '35.695976' , lng: '139.751608' }, { lat: '35.691771' , lng: '139.698606' } //座標を増やしたければ、ここから加えたいだけオブジェクトリテラルで加えていけばOK(末尾の「,」だけ注意) ]; var latlng = new google.maps.LatLng( latlngArr[0].lat , latlngArr[0].lng );//地図の中心位置。今回はとりあえずlatlngArrの一つ目にしておきました var optios = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById('map') , optios ); var markers = new Array(); var circle = new Array(); for(var i=0;i<latlngArr.length; i++){ var length = Object.keys(latlngArr[i]).length; //距離計算 dはkmで返される /* 注意:ここの計算は再考が必要…(2点間の距離を測るだけなら単純なのですが、3点以上になると。。。) */ if(i === latlngArr.length-1){ var d = calcDistance(latlngArr[i].lat, latlngArr[i].lng, latlngArr[0].lat, latlngArr[0].lng) }else{ var d = calcDistance(latlngArr[i].lat, latlngArr[i].lng, latlngArr[i+1].lat, latlngArr[i+1].lng) } /* ちなみに2点間の距離を測るだけなら if(i < latlngArr.length){ var d = calcDistance(latlngArr[i].lat, latlngArr[i].lng, latlngArr[0].lat, latlngArr[0].lng) } のみで */ //マーカーを配置 markers[i] = new google.maps.Marker({ position: new google.maps.LatLng( latlngArr[i].lat , latlngArr[i].lng ), map: map }); //図形(円)を表示 circle[i] = new google.maps.Circle({ center : new google.maps.LatLng( latlngArr[i].lat , latlngArr[i].lng ), fillColor: '#ff0000', fillOpacity: 0.5, map: map, radius: 2000, strokeColor: '#ff0000', strokeOpacity: 1, strokeWeight: 1 }); //titleだとカーソルオンしてから数秒待たなければ表示されないので「情報ウィンドウ」で表示 if(d<4){ //距離が4km未満なら var infoWindw = new google.maps.InfoWindow({content:'出店不可'}) }else{ var infoWindw = new google.maps.InfoWindow({content:'出店可'}) } infoWindw.open(map , markers[i]); } } </script>

※数学が苦手なもので、緯度・経度からの距離計算式(※参考:「二地点の緯度・経度からその距離を計算する」(http://yamadarake.jp/trdi/report000001.html)」を見て気持ちが萎えたので、
「Google Maps JavaScript API V3 + 2点間距離計算!」
http://www.mk-mode.com/octopress/2013/07/12/google-maps-api-calc-distance/
から計算用コードを拝借しました。。(※constが使われていた箇所をvar宣言に変えています)

1.2点目以降の地図のピンと半径を置く

マップに配置したいマーカーの数だけループで処理すればOKですよ。(※下記コード参照)

2.点同士の距離が4km以内だった時に、”出店不可”4km以上だった時に”出店可”を返す

2点だけで大丈夫なら、さほど難しくはないのですが、3点以上になるとかなり複雑な計算が必要になるかと…
(…数学が苦手なもので、公式が分かりません。。苦笑 ここだけだれか別の方のお知恵をお貸しいただけると幸いです。。)

投稿2016/04/21 16:11

編集2016/04/21 16:12
manabufukai

総合スコア700

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

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

0

点の座標がわかっているなら、点同士の距離を測るが普通じゃないかなぁ。簡単だし。
google map api に円の重なりを検出するような仕組みがあるのであれば別だけど。

投稿2016/04/20 11:29

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

yahret45

2016/04/20 11:30

仰る通り、点同士の距離で測るほうが簡単ですね。ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問