OpenLayersで地図の中心に四角形を描画する方法は？

前へ 次へ
このQ&Aのポイント
  • OpenLayersを使用して表示中の地図の中心に四角形を描画したいです。
  • index.htmlのコードでは、地図の表示とズームを設定するJavaScriptが含まれています。
  • loadMap()関数を使用して地図を読み込み、__mapオブジェクトで操作します。
回答を見る
  • ベストアンサー

Openlaerで四角描画

表示中の地図の中心に四角形を描画したいのですがよくわからないで困っています。ご教示頂けないでしょうか？ index.htmlの内容 ↓ここから <!doctype html> <html lang ='ja'> <head> <meta charset='utf-8'/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10 "> <link rel=" stylesheet" href=" https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <script src=" https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <script type='text/javascript'> var view = new ol.View({ projection: "EPSG:3857", maxZoom: MaxZoom, minZoom: MinZoom }) var __map = null; var center_lon = 135.100303888; // 中心の経度（須磨浦公園） var center_lat = 34.637674639; // 中心の緯度（須磨浦公園） var initZoom = 10; // ズームの初期値 var MinZoom = 6; // ズームの最小値（最も広い範囲） var MaxZoom = 17; // ズームの最大値（最も狭い範囲） var default_lon = center_lon; var default_lat = center_lat; function loadMap() { var _stdLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png' }) }); __map = new ol.Map({ target: 'map', layers: [ _stdLayer ], view: view, controls: ol.control.defaults().extend([new ol.control.ScaleLine()]), interactions: ol.interaction.defaults() }); // zoom slider の追加 __map.addControl(new ol.control.ZoomSlider()); // 中心の指定。view に対して指定。transform を忘れないこと。 view.setCenter(ol.proj.transform([center_lon, center_lat], "EPSG:4326", "EPSG:3857")); // zoom の指定。view に対して指定する。 view.setZoom(initZoom); } </script> <style> html, body { height:99%; width: 100%; padding:1px 0; margin: 0; } #map {height:98%; width:98%; margin:0 auto;} #content { width: 100%; height: 100%; } body #content p { margin: 0 0 0 0 ; } body .popup { left: -36px ; top: -76px ; position: relative ; display: inline-block ; margin: 1.5em 0 ; padding: 3px 6px ; width: 130px ; background: #FFF ; box-sizing: border-box ; font-size: 12px ; border: solid 1px #555 ; border-radius: 6px; } </style> </head> <body onload ='loadMap();'> <div id='map'></div> </body> </html>

  • rai4_
  • お礼率30% (4/13)
  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.2

ご希望の四角形がどのようなものか、具体的に把握できなかったので推測して実装しました。 ご提示いただいたソースコードに以下の改変を加えると、地図の移動に関わらず地図の中央に120px×120pxの四角形を描画します。 ■JavaScript ・var MaxZoom = 17の次の行に下記を追加 var square = { // 描画する四角形のサイズ(px) width: 120, height: 120 }; ・loadMap関数の末尾に下記を追加 // 中心に四角形表示 var target = document.getElementById(__map.values_.target); target.insertAdjacentHTML('beforeend', '<div id="square_overlay" style="width:' + square.width + 'px; height:' + square.height + 'px"></div>'); ■CSS ・下記のCSSを追加 #square_overlay{ position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: 2147483647; background: rgba(255, 0, 0, 0.5); border: solid 1px red; } var squareの値を変えるとサイズが変更できます。また、スタイルは適宜お好みのものを指定してください。

rai4_
質問者

お礼

ありがとうございました。早速試してみます。

その他の回答 (1)

  • doraneko66
  • ベストアンサー率11% (535/4742)
回答No.1

詳しくはわかりませんが z-indexの問題なのでは？ 地図と四角の読み込ませ方の順番を考えて見た方が良い気がします。 CCSの読み込ませ方の位置、JSの読み込ませ方の位置。とか

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • GoogleMapsAPIのストリートビュー

    GoogleMapsAPIでマーカーをストリートビューで表示させたい GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、 このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか マーカーは人型のアイコンではなく、追加したマーカーです よろしくお願いします 以下、ソースです /////////////////////////////////////////////// <script type="text/javascript"> function initialize() { var map = new google.maps.Map( document.getElementById("gMap"),{ zoom : 16, center : new google.maps.LatLng(35.688272,139.696459), mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true } ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(35.688272,139.696459), map: map, draggable : true }); } </script> <style> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */ } </style> </head> <body onload="initialize()"> <div id="gMap"></div> <div id="View"></div> </body> ///////////////////////////////////////////////

  • Googlemapb api　複数のマーカー表示に

    基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。 Googlemap api を使った複数のマーカー表示を$getJSON（jQuery)を使用しようして表示させたいのですが、表示できません。 どこがおかしいか教えてください。 【HTML】 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>map</title> 6.<style type="text/css"> 7.html,body,#map { 8.height: 100%; 9.} 10.</style> 11.</head> 12.<body> 13.<div id="map"></div> 14.<script type="text/javascript" src="map.js"></script> 15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script> 16.<script async defer 17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"> 18.</script> 19.</body> 20.</html> 【JavaScript】 1.var map; 2.var marker = []; 3.var data = []; 4.var center = {lat: 36.72073,lng: 137.27112}; 5.function initMap() {//地図の作成 6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む 7. center: center,// 地図の中心を指定 8. zoom: 15 // 地図のズームを指定 9. }); 10. $.getJSON("aaaaa.json", function(json){ 11. for (var i = 0; i <= json.length-1; i++) { 12. data.push( 13. { 14. 'name': json[i].name, 15. 'lat': json[i].lat, 16. 'lng': json[i].lng 17 }); 18 }; 19. for (var i = 0; i < data.length; i++) { 20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 21. marker[i] = new google.maps.Marker({　//マーカーの追加 22. position: markerLatLng,//マーカーを立てる位置を指定 23. map: map//マーカーをたてる地図を指定 24. }); 25. } 26 });//jsonの閉じ 27.} 【JSON】 [ { "name": "名古屋駅", "lat": 35.170897, "lng": 136.881558 }, { "name": "大名古屋ビルヂング", "lat": 35.172311, "lng": 136.884568 }, { "name": "国際センター駅", "lat": 35.172038, "lng": 136.887701 } ]

  • Googleストリートビューの写真を切り替えるスクリプトがIE6だけ動作しない原因を知りたいです。

    Googleストリートビューを使って、 テキストリンクで写真を切り替えるページを作りました。 ソースは下記に記述したものです。 こちらをブラウザで確認したところ FirefoxやIE7では問題なく動作しましたが、 IE6だけマップは移動するものの、 ストリートビューが移動しませんでした。 <html> <head> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[APIキー]" type="text/javascript"></script> </head> <body onload="load()"> <div id="street" style="width:320px;height:200px"></div> <div id="map" style="width:320px;height:200px"></div> <ol> <li><a href="#" onClick="map01();return false">地図1を表示</a></li> <li><a href="#" onClick="map02();return false">地図2を表示</a></li> </ol> <script type="text/javascript"> //<![CDATA[ function load() { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.655, 139.744), 18); panorama = new GStreetviewPanorama(document.getElementById("street")); } // 地図1 function map01() { var point = new GLatLng(35.655, 139.744); map.panTo(point); panorama.setLocationAndPOV(point); } // 地図2 function map02() { var point = new GLatLng(35.657, 139.751); map.panTo(point); panorama.setLocationAndPOV(point); } //]]> </script> </body> </html> 以上のソースになります。 原因がお分かりになる方いらっしゃいますでしょうか。 ちなみに、ストリートビューの画面がローカル環境で動かないため、 APIキーを取得したWebページでしか確認できないかもしれません。。 お手数になってしまいますが、よろしくお願いします。

    • ベストアンサー
    • AJAX
  • Google Maps APIについて質問です

    こんにちは。 現在大学の研究の一環で、Google Maps APIについて学習しております。 APIに関して全くの初心者ですが、質問があります。 今回必要としている機能として、羊ケ丘展望台から札幌駅へ向かう２ルートを地図上に表示させたいのですが 下記に示すようなものが現在できております。 ですが、まだ一つのルートしか表示できません。 このルートをそのままに、同じ出発地と到着地で（43.034047,141.359536）を経由するルートを赤いラインで追加したいと思っているのですが、 この場合はどういったコードになるのでしょうか？ かなりいろいろ調べてみましたが、初心者ゆえなかなか上手くできません。 どなたか知識をお持ちの方がいらっしゃいましたら、ご助力頂きたく存じます。 何卒宜しくお願い致します。 <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <style type="text/css"> v\:* {behavior:url(#default#VML);} html, body {width: 100%; height: 100%} body {top:0px;left:0px;margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px} </style> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> google.maps.event.addDomListener(window, 'load', function() { var mapObj; var lng = 139.8131925612688; var lat = 35.73369469149347; var mapOptions = { zoom: 11, center: null, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); // ルートを表示するマップを設定 var directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(mapObj); // 開始地点と終了地点、ルーティングの種類の設定 var request = { origin: "羊ケ丘展望台", destination: "札幌駅", travelMode: google.maps.DirectionsTravelMode.DRIVING }; // ルート検索を行う var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); } }); // Monitor the window resize event and let the map know when it occurs if (window.attachEvent) { window.attachEvent("onresize", function() {this.map.onResize()} ); } else { window.addEventListener("resize", function() {this.map.onResize()} , false); } }); </script> </head> <body> <div id="gmap" style="top:0px;left:0px;width: 100%; height: 100%;"> </div> </body> </html>

  • googlemapについて教えてください。

    googlemapでマーカーが追随するようにしたくて、function update(position)　の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>

  • googleマップが表示されない。

    Google Maps APIを使用しホームページに地図を載せているのですが、自分自身のパソコンではFTPイメージを出力した出力先html、ネット上でもしっかりと地図は表示されているのですが、他の人のパソコンで見てみると表示しません。 下記のようにGoogle Maps APIでキーを取得し作成したのですが、どこかおかしいところがあるのでしょうか？申し訳ありませんがアドバイスよろしくお願いします。 <!-- key=*** の***部分をグーグル( http://www.google.com/apis/maps/signup.html )から取得し、入れ替える --> <SCRIPT src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAUV0srDj6343wV8Rdpy-xRRQ2GBzO3UXWtLA5PQfCol6gfChjOhS-izw7H3T2ywNEuQOminx4rgEgGw" type="text/javascript"></SCRIPT> <!-- ここへ地図を出力します↓ 地図の大きさの変更はwidthとheightの数値を使います。 --> <div id="map" style="width: 500px; height: 500px"> </div> <SCRIPT type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById('map')); map.addControl(new GLargeMapControl()); //所在地の座標設定 var lon = ○○;//経度 var lat = ○○;//緯度 var myoffice = new GPoint(lon,lat); //所在地を中心にする map.centerAndZoom(myoffice , 0);// 数値部分を変えると詳細-広域に変更できます。0-17 　　//中心を所在地と別に設定する場合 　　//map.centerAndZoom(new GPoint(○○, ○○) , 0); // 所在地の地点にアイコンを設定する // Create a base icon for all of our markers that specifies the // shadow, icon dimensions, etc. var baseIcon = new GIcon(); baseIcon.shadow = 'http://www.google.com/mapfiles/shadow50.png'; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); baseIcon.infoWindowAnchor = new GPoint(9, 2); baseIcon.infoShadowAnchor = new GPoint(18, 25); var icon = new GIcon(baseIcon); icon.image = 'http://www.google.com/mapfiles/markerA.png'; //所在地を表示する var marker = new GMarker(myoffice,icon); //var marker = new GMarker(myoffice);// デフォルトのマーカー画像を利用する場合 map.addOverlay(marker); //]]> </SCRIPT>

  • gmap　ストリートビュー

    普通の地図とストリートビューを両方表示したいですが。 どうもストリートビューのほうが不具合が生じます。 ストリートビューがない場所に近いところのストリートビューを表示したいですが、どうすればいいですか？ IEで見ると、ストリートビューの方角標識がズレてて、修正方法を教えていただけますでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var map_canvas; function initialize() { var initPos=new google.maps.LatLng(35.658613,139.745525); var mapOptions = { center:initPos, zoom:14, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl: true, mapTypeControl : true, mapTypeControlOptions : { style : google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var request = { address: "千葉県佐倉市ユーカリが丘４-５７５-２２" }; var geocoder = new google.maps.Geocoder(); geocoder.geocode(request, procGeocodeCallback); } function procGeocodeCallback(results,status){ var response; if(status == google.maps.GeocoderStatus.OK){ for (var i = 0; i < results.length; i++){ map_canvas.setCenter(results[i].geometry.location); openInfoWnd(results[i].geometry.location, results[i].formatted_address.replace(/^日本, /, '')); var markerOpts = { position : results[i].geometry.location, map : map_canvas }; var marker = new google.maps.Marker(markerOpts); // ストリートビュー表示 var svp = new google.maps.StreetViewPanorama( document.getElementById("street"), { position : results[i].geometry.location, pov : { heading : 90, // 東 pitch : 20, // 斜め上 zoom : 0.5 // ズームアウト } }); map_canvas.setStreetView(svp); // ストリートビューの方角などを求める function checkSTV(){ var pov = svp.getPov(); var hd = pov.heading; // 方角 var pt = pov.pitch; // 見上げる角度 var zm = pov.zoom; // ズーム alert("方角："+hd+"、角度："+pt+"、ズーム："+zm); } } } } function openInfoWnd(latlng,txt){ if( txt === undefined) { txt =""; } else { txt += "<BR>"; } var info = new google.maps.InfoWindow(); info.setContent("<div id=\"gmap_d\">" + "<span>" + "ユーカリが丘" + "</span>" + txt + "</div>".toString()); info.setPosition(latlng); info.open(map_canvas); } google.maps.event.addDomListener(window,"load",initialize); --> </script> <div id="map_canvas" style="width: 450px; height: 300px; float:left"></div> <div id="street" style="width: 300px; height: 300px; float:left"></div>

  • ラジオボタンとテキストボックスの連動

    現在googleマップで経度、緯度の取得ができました。 そこで、こちらのサイト（http://www.geocities.jp/standing_art/hoheto/idokeido_old.html）のようにラジオボタン選択時のテキストボックスにのみ経度、緯度の取得を行いたいのですがどうすればいいでしょうか？ 今あるソースはこれです。 <!DOCTYPE html> <html> <head> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //<![CDATA[ var map; function init() { var latlng = new google.maps.LatLng(39, 138); var opts = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); google.maps.event.addListener(map, 'click', mylistener); } function mylistener(event) { document.getElementById("show_lng").innerHTML = event.latLng.lng(); document.getElementById("show_lat").innerHTML = event.latLng.lat(); } //]]> </script> </head> <body onload="init()"> <div id="map" style="height:560px"></div> 緯度 : <div id="show_lng"></div> 経度 : <div id="show_lat"></div> </body> </html>

  • javascriptで困っています。教えてください

    読み込まれたら、watchPositionで位置情報を取得し続け、ボタンを押したタイミングでmap_draw関数を実行して、地図を表示させようと思っています。そのときseidoが５以下のときだけ地図を表示させたいので、seidoが５より大きいときは、map_draw関数をもう一度呼び出すループを考えました。しかし、watchPositionではきちんとseido = position.coords.accuracy;の値がとれており、５以下になっているのですが、map_draw関数のなかでseidoの変数をうまく取得できません。map_draw関数では最初の一回目だけ取得して、後は値が変わりません。ループの部分に問題があるのでしょうか？教えていただければと思い投稿しました。よろしくお願いします。 <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript" charset="utf-8"> var ido; var keido ; var seido ; var map; var btn; window.onload = function(){ btn = document.getElementById("btn"); btn.addEventListener('click', map_draw, false); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); } function update(position){ ido = position.coords.latitude; keido = position.coords.longitude; seido = position.coords.accuracy; 　　　　　　　　 　　var htmlTxt = "Lat." + ido + "Lng" + keido+ "Acc" + seido; htmlTxt += "<br>"+(new Date()); var pos = document.getElementById("pos"); pos.innerHTML = htmlTxt; } function poserror(position){ alert("error"); 　　　　　　　　} function map_draw(){ if(seido>5){ map_draw(); }else{ 　var lat = ido; 　var lng = keido; 　var Latlng = new google.maps.LatLng( lat , lng ); var myOptions = { 　zoom: 17, 　center: Latlng, 　mapTypeId: google.maps.MapTypeId.ROADMAP 　 }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); } } </script> </head> <body> <p id="pos">情報</p> <div id="map_canvas" style="width:480px; height:640px;">地図</div> <button id="btn">地図を描く</button> </body>

  • google mapのピンを変更したい

    お店の位置をホームページ上でgoogle mapを使い、お客様にお知らせしたいので、API keyを取得し、位置情報などを入力しているのですが、初期設定の赤いピンマークをお店のオリジナルピンマークに変更したいのですが、方法がわかりません。 書いたコードは… <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="http://maps.google.com/maps?file=api&v=1&key=取得したAPI key" type="text/javascript"></script> </head> <body> <div id="map" style="width: 800px; height: 600px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); //　センター 位置 map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // お店位置 var point = new GPoint(お店の位置情報); // お店紹介 var html = "<div style='width:350px;font-size:12px;' ><table><tr><td><img src=画像アドレス ></td><td>郵便番号 <br>住所 <br>電話番号<br><br>営業時間<br><br>最寄り駅紹介</td></tr></table></div>"; var marker = createMarker(point,html); map.addOverlay(marker); var marker = createMarker(point,html); map.addOverlay(marker); function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> </script> </body> </html> 以上を入力しました。 この中のどの部分にピン情報を入力すればいいのか？ また、どのように入力すればいいのかを教えていただきたいのです。 ご教授お願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する