質問編集履歴

文字の修正

2021/06/07 13:19

投稿

yositigu

スコア17

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,18 +2,6 @@
 OverlayViewとoverlayMapTypesのlayerの順番を制御することは可能でしょうか。
-可能な場合、参考のプログラムなどをお見せしていただけると助かります。
-以下はOverlayViewとoverlayMapTypesのlayerを表示したサンプルです。
-サンプルに記載はないですが、
-複数のOverlayViewのレイヤーをzindexで制御した処理はすでにできており、
-overlayMapTypesをOverlayViewのレイヤーと同じように表示順番の制御をしたいです。
-zIndexを使って表示制御するようにしたいです。
 ![イメージ説明](d69e2db65df7732fdebb602fddf1c237.png)

コード追加

2021/06/07 13:19

投稿

yositigu

スコア17

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -3,3 +3,451 @@
 OverlayViewとoverlayMapTypesのlayerの順番を制御することは可能でしょうか。
 可能な場合、参考のプログラムなどをお見せしていただけると助かります。
+以下はOverlayViewとoverlayMapTypesのlayerを表示したサンプルです。
+サンプルに記載はないですが、
+複数のOverlayViewのレイヤーをzindexで制御した処理はすでにできており、
+overlayMapTypesをOverlayViewのレイヤーと同じように表示順番の制御をしたいです。
+zIndexを使って表示制御するようにしたいです。
+![イメージ説明](d69e2db65df7732fdebb602fddf1c237.png)
+サンプルのコード
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+    <title>Adding a Custom Overlay</title>
+    <style>
+      html, body {
+        height: 100%;
+        margin: 0px;
+        padding: 0px
+      }
+      #map-canvas {
+        height: 100%;
+        width: 70%;
+        padding: 0px;
+        float:left;
+      }
+      #info-box{
+        height: 100%;
+        width: 30%;
+        float:left;
+      }
+    </style>
+    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
+    <script>
+// [START region_initialization]
+// This example creates a custom overlay called USGSOverlay, containing
+// a U.S. Geological Survey (USGS) image of the relevant area on the map.
+// Set the custom overlay object's prototype to a new instance
+// of OverlayView. In effect, this will subclass the overlay class.
+// Note that we set the prototype to an instance, rather than the
+// parent class itself, because we do not wish to modify the parent class.
+var overlay;
+USGSOverlay.prototype = new google.maps.OverlayView();
+var swMarker;
+var neMarker;
+var map;
+// Initialize the map and the custom overlay.
+function initialize() {
+  var mapOptions = {
+    zoom: 11,
+    center: new google.maps.LatLng(62.323907, -150.109291),
+    mapTypeId: google.maps.MapTypeId.SATELLITE
+  };
+  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
+  var swBound = new google.maps.LatLng(62.281819, -150.287132);
+  var neBound = new google.maps.LatLng(62.400471, -150.005608);
+  var bounds = new google.maps.LatLngBounds(swBound, neBound);
+  // The photograph is courtesy of the U.S. Geological Survey.
+  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
+  srcImage += 'examples/full/images/talkeetna.png';
+  // The custom USGSOverlay object contains the USGS image,
+  // the bounds of the image, and a reference to the map.
+  overlay = new USGSOverlay(bounds, srcImage, map);
+  // Let's create two markers that will act as holders of the Overlay bounds.
+  swMarker = new google.maps.Marker({
+    position: swBound,
+    map: map, // handle of the map
+    draggable:true
+  });
+  neMarker = new google.maps.Marker({
+    position: neBound,
+    map: map, // handle of the map
+    draggable:true
+  });
+  //this callback will be called everytime the markers are moved
+  // updating the Overlay bounds.
+  var dragcallback = function(){
+    document.getElementById('sw-lat').value = swMarker.position.lat();
+    document.getElementById('sw-lon').value = swMarker.position.lng();
+    document.getElementById('ne-lat').value = neMarker.position.lat()
+    document.getElementById('ne-lon').value = neMarker.position.lng();
+    overlay.bounds_ = new google.maps.LatLngBounds(swMarker.position, neMarker.position);
+    overlay.draw();
+  }
+  google.maps.event.addListener(swMarker,'drag',dragcallback);
+  google.maps.event.addListener(neMarker,'drag',dragcallback);
+  //ADD ImageMaptype
+  var weatherMapType = new google.maps.ImageMapType({
+	getTileUrl: function(coord, zoom) {
+		return 'http://tile.openstreetmap.org/'
+				+ zoom + '/'
+				+ coord.x + '/'
+				+ coord.y + '.png';
+	},
+	tileSize: new google.maps.Size(256, 256),
+	maxZoom: 9,  //表示する最大のズーム値
+	minZoom: 0,  //表示する最小のズーム値
+	name: 'clouds_new'
+});
+map.overlayMapTypes.insertAt(0, weatherMapType);
+}
+// [END region_initialization]
+// [START region_constructor]
+/** @constructor */
+function USGSOverlay(bounds, image, map) {
+  // Initialize all properties.
+  this.bounds_ = bounds;
+  this.image_ = image;
+  this.map_ = map;
+  // Define a property to hold the image's div. We'll
+  // actually create this div upon receipt of the onAdd()
+  // method so we'll leave it null for now.
+  this.div_ = null;
+  // Explicitly call setMap on this overlay.
+  this.setMap(map);
+}
+// [END region_constructor]
+// [START region_attachment]
+/**
+ * onAdd is called when the map's panes are ready and the overlay has been
+ * added to the map.
+ */
+USGSOverlay.prototype.onAdd = function() {
+  var div = document.createElement('div');
+  div.style.borderStyle = 'none';
+  div.style.borderWidth = '0px';
+  div.style.position = 'absolute';
+  // Create the img element and attach it to the div.
+  var img = document.createElement('img');
+  img.src = this.image_;
+  img.style.width = '100%';
+  img.style.height = '100%';
+  img.style.position = 'absolute';
+  img.style.opacity = '0.6';
+  img.style.filter = 'alpha(opacity=60)';
+  div.appendChild(img);
+  this.div_ = div;
+  // Add the element to the "overlayLayer" pane.
+  var panes = this.getPanes();
+  panes.overlayLayer.appendChild(div);
+};
+// [END region_attachment]
+// [START region_drawing]
+USGSOverlay.prototype.draw = function() {
+  // We use the south-west and north-east
+  // coordinates of the overlay to peg it to the correct position and size.
+  // To do this, we need to retrieve the projection from the overlay.
+  var overlayProjection = this.getProjection();
+  // Retrieve the south-west and north-east coordinates of this overlay
+  // in LatLngs and convert them to pixel coordinates.
+  // We'll use these coordinates to resize the div.
+  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
+  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
+  // Resize the image's div to fit the indicated dimensions.
+  var div = this.div_;
+  div.style.left = sw.x + 'px';
+  div.style.top = ne.y + 'px';
+  div.style.width = (ne.x - sw.x) + 'px';
+  div.style.height = (sw.y - ne.y) + 'px';
+};
+// [END region_drawing]
+// [START region_removal]
+// The onRemove() method will be called automatically from the API if
+// we ever set the overlay's map property to 'null'.
+USGSOverlay.prototype.onRemove = function() {
+  this.div_.parentNode.removeChild(this.div_);
+  this.div_ = null;
+};
+// [END region_removal]
+google.maps.event.addDomListener(window, 'load', initialize);
+    </script>
+  </head>
+  <body>
+    <div id="info-box">
+      <br/>
+      <br/>
+      <label for="sw-lat">SW Lat</label>
+      <input id="sw-lat" name="sw-lat" type="text" value="" readonly="readonly"/><br/>
+      <label for="sw-lon">SW Lon</label>
+      <input id="sw-lon" name="sw-lon" type="text" value="" readonly="readonly"/><br/>
+      <label for="ne-lat">NE Lat</label>
+      <input id="ne-lat" name="ne-lat" type="text" value="" readonly="readonly"/><br/>
+      <label for="ne-lon">NE Lon</label>
+      <input id="ne-lon" name="ne-lon" type="text" value="" readonly="readonly"/>
+    </div>
+    <div id="map-canvas"></div>
+  </body>
+</html>
+```