この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
gmap3_latlng [2018/05/26 22:22] 管理者 |
gmap3_latlng [2018/05/26 22:28] (現在) 管理者 [備考] |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
+ | [[start]]>[[programming_start]] | ||
+ | ~~NOCACHE~~ | ||
+ | ====== GoogleMaps APIv3 中心の座標を表示 ====== | ||
+ | マップ中央の緯度・経度とマップの倍率を表示します | ||
+ | |||
+ | ===== サンプルデモ ===== | ||
+ | マップ下部に緯度・経度とマップの倍率を表示します。地図を移動すると変化します。編集で使える用inputフォームと通常のhtml用の2種類出力しています。 | ||
+ | |||
+ | <html> | ||
+ | <style> | ||
+ | #mapdiv1 {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv1"></div> | ||
+ | |||
+ | <!-- 緯度・経度・倍率を表示するタグ --> | ||
+ | <ul> | ||
+ | <li>緯度<input type="text" id="lat_input" /> <span id="lat_span"></span></li> | ||
+ | <li>経度<input type="text" id="lng_input" /> <span id="lng_span"></span></li> | ||
+ | <li>倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span></li> | ||
+ | </ul> | ||
+ | |||
+ | <script> | ||
+ | var map1; | ||
+ | function initMap1() { | ||
+ | |||
+ | //地図表示 | ||
+ | map1 = new google.maps.Map(document.getElementById('mapdiv1'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | //センターマーカー表示 | ||
+ | var tgt_marker = new google.maps.Marker({ | ||
+ | position: {lat: 34.649394, lng: 135.001478}, | ||
+ | map: map1, | ||
+ | clickable: false, /* クリック不可 */ | ||
+ | zIndex: 0 | ||
+ | }); | ||
+ | tgt_marker.setMap(map1); | ||
+ | | ||
+ | //地図の表示内容が変更されたら | ||
+ | google.maps.event.addListener( map1 ,'bounds_changed',function(){ | ||
+ | //緯度と経度を取得 | ||
+ | var pos = map1.getCenter(); | ||
+ | var latlng = new google.maps.LatLng( pos.lat(), pos.lng() ); | ||
+ | var lat = latlng.lat(); | ||
+ | var lng = latlng.lng(); | ||
+ | //現在の表示倍率を取得 | ||
+ | var zoom=map1.getZoom(); | ||
+ | |||
+ | //spanに出力 | ||
+ | document.getElementById('lat_span').innerHTML = lat; | ||
+ | document.getElementById('lng_span').innerHTML = lng; | ||
+ | document.getElementById('zoom_span').innerHTML = zoom; | ||
+ | |||
+ | //編集用にinputに出力 | ||
+ | document.getElementById('lat_input').value = lat; | ||
+ | document.getElementById('lng_input').value = lng; | ||
+ | document.getElementById('zoom_input').value = zoom; | ||
+ | | ||
+ | //ターゲットスコープ移動 | ||
+ | tgt_marker.setPosition(pos); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjv8os9QozlDKp4kd6S0dtt8OX-K8WIzw&callback=initMap1" async defer></script> | ||
+ | </html> | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | <code javascript> | ||
+ | <style> | ||
+ | #mapdiv1 {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv1"></div> | ||
+ | |||
+ | <!-- 緯度・経度・倍率を表示するタグ --> | ||
+ | <ul> | ||
+ | <li>緯度<input type="text" id="lat_input" /> <span id="lat_span"></span></li> | ||
+ | <li>経度<input type="text" id="lng_input" /> <span id="lng_span"></span></li> | ||
+ | <li>倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span></li> | ||
+ | </ul> | ||
+ | |||
+ | <script> | ||
+ | var map1; | ||
+ | function initMap1() { | ||
+ | |||
+ | //地図表示 | ||
+ | map1 = new google.maps.Map(document.getElementById('mapdiv1'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | //センターマーカー表示 | ||
+ | var tgt_marker = new google.maps.Marker({ | ||
+ | position: {lat: 34.649394, lng: 135.001478}, | ||
+ | map: map1, | ||
+ | clickable: false, /* クリック不可 */ | ||
+ | zIndex: 0 | ||
+ | }); | ||
+ | tgt_marker.setMap(map1); | ||
+ | | ||
+ | //地図の表示内容が変更されたら | ||
+ | google.maps.event.addListener( map1 ,'bounds_changed',function(){ | ||
+ | //緯度と経度を取得 | ||
+ | var pos = map1.getCenter(); | ||
+ | var latlng = new google.maps.LatLng( pos.lat(), pos.lng() ); | ||
+ | var lat = latlng.lat(); | ||
+ | var lng = latlng.lng(); | ||
+ | //現在の表示倍率を取得 | ||
+ | var zoom=map1.getZoom(); | ||
+ | |||
+ | //spanに出力 | ||
+ | document.getElementById('lat_span').innerHTML = lat; | ||
+ | document.getElementById('lng_span').innerHTML = lng; | ||
+ | document.getElementById('zoom_span').innerHTML = zoom; | ||
+ | |||
+ | //編集用にinputに出力 | ||
+ | document.getElementById('lat_input').value = lat; | ||
+ | document.getElementById('lng_input').value = lng; | ||
+ | document.getElementById('zoom_input').value = zoom; | ||
+ | | ||
+ | //ターゲットスコープ移動 | ||
+ | tgt_marker.setPosition(pos); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjv8os9QozlDKp4kd6S0dtt8OX-K8WIzw&callback=initMap1" async defer></script> | ||
+ | </code> | ||
+ | |||
+ | ===== 説明 ===== | ||
+ | |||
+ | 1.HTMLに座標を出力する部分です。inputフォームとspanに出力します。 | ||
+ | <code html> | ||
+ | <ul> | ||
+ | <li>緯度<input type="text" id="lat_input" /> <span id="lat_span"></span></li> | ||
+ | <li>経度<input type="text" id="lng_input" /> <span id="lng_span"></span></li> | ||
+ | <li>倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span></li> | ||
+ | </ul> | ||
+ | </code> | ||
+ | |||
+ | 使わない項目を削除したい場合はAPI(JavaScript)の出力部分も削除しないとエラーになります。(削除する部分がわからない場合は表示したくない項目にをdivやspanで囲ってCSSの「display: none;」で隠しても良いです。) | ||
+ | |||
+ | <code html> | ||
+ | <style> | ||
+ | .hide{display: none;} | ||
+ | </style> | ||
+ | ↓ | ||
+ | <li>緯度<input type="text" id="lat_input" /> <span class="hide"><span id="lat_span"></span></span></li> | ||
+ | <li>経度<input type="text" id="lng_input" /> <span class="hide"><span id="lng_span"></span></span></li> | ||
+ | <li>倍率<span class="hide"><input type="text" id="zoom_input" /></span><span id="zoom_span"></span></li> | ||
+ | </code> | ||
+ | |||
+ | 2.「bounds_changed」はマップに変化があったら発生するイベントで、移動したら緯度・経度・表示倍率を取得し、上記の表示場所に値を挿入しています。 | ||
+ | |||
+ | <code javascript> | ||
+ | //地図の表示内容が変更されたら | ||
+ | google.maps.event.addListener( map1 ,'bounds_changed',function(){ | ||
+ | //緯度と経度を取得 | ||
+ | var pos = map1.getCenter(); | ||
+ | var latlng = new google.maps.LatLng( pos.lat(), pos.lng() ); | ||
+ | var lat = latlng.lat(); | ||
+ | var lng = latlng.lng(); | ||
+ | //現在の表示倍率を取得 | ||
+ | var zoom=map1.getZoom(); | ||
+ | |||
+ | //spanに出力 | ||
+ | document.getElementById('lat_span').innerHTML = lat; | ||
+ | document.getElementById('lng_span').innerHTML = lng; | ||
+ | document.getElementById('zoom_span').innerHTML = zoom; | ||
+ | |||
+ | //編集用にinputに出力 | ||
+ | document.getElementById('lat_input').value = lat; | ||
+ | document.getElementById('lng_input').value = lng; | ||
+ | document.getElementById('zoom_input').value = zoom; | ||
+ | | ||
+ | }); | ||
+ | </code> | ||
+ | |||
+ | ===== 備考 ===== | ||
+ | センターマーカーについては次のページをご覧下さい・・・[[gmap3_cross]] | ||
+ | |||