6

Google Maps API V3 では、マップ オブジェクトを作成しました。

map = new google.maps.Map(document.getElementById("map_canvas"),
  myOptions);

そのマップをズームインしてパンし、後で元のビューに戻るために、ズーム レベルとマップの中心を保存したいと思います。私は次のことを試します：

oldCenter = map.getCenter();
oldZoom = map.getZoom();

しかし、変数は「未定義」のままです。コンソールで同じことをすると、正しい応答が得られます。

私は何を間違っていますか？答えを見つけるためにさらにコードが必要な場合、または明らかな問題である場合はお知らせください。

ありがとう！

完全なコード:

function initialize() {

  // CUSTOM PLACES
  var latlng = new google.maps.LatLng(51, 10);
  var germany = new google.maps.LatLng(51, 10);
  var myLatlng = new google.maps.LatLng(49,12);

  // DEFINE STYLE
  var styles = [
    {
      "stylers": [
        { "invert_lightness": true }
      ]
    }
  ];

  // MARKER STYLES
  var coin_image  = 'coin.png';
  var merch_image = 'merch.png';

  // DEFINE OPTIONS FOR MAP
  var myOptions = {
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_TOP
    },
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  // CREATE MAP OBJECT
  map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  map.setOptions({styles: styles});

  // select zoom, etc by defining 2 points
  var southWest = new google.maps.LatLng(45,-10);
  var northEast = new google.maps.LatLng(55,15);
  var bounds = new google.maps.LatLngBounds(southWest,northEast);
  map.fitBounds(bounds);

  placeMarker(southWest);
  placeMarker(northEast);

  // Place Random Markers
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 50; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
        position: location, 
        map: map,
        icon: merch_image
    });
    var j = i + 1;
    marker.setTitle(j.toString());
  }


  // TRANSACTION MARKERS

  // ONE FULL CYCLE
  // set marker

  var trans_marker = new google.maps.LatLng(52.31799,13.241904);
  var marker = new google.maps.Marker({
      position: trans_marker, 
      map: map,
      animation: google.maps.Animation.DROP,
      title:"Hello World!",
      icon: coin_image
  });

      // HERE'S THE PROBLEM
  // var oldCenter = map.getCenter();
  // var oldZoom = map.getZoom();

  console.log(map);
  oldMap = map;
  console.log(oldMap);
  // console.log(oldZoom);
  // console.log(oldCenter.toString());

  // pan to marker
  setTimeout(function() {map.panTo(trans_marker)}, startDelayed(3000));

  // zoom in on marker
  setTimeout(function() {zoomIn(ENDZOOM)}, startDelayed(1000));

  // show info window
  var contentString =  "<h3>Döner @ Coco Banh</h3>";
  contentString += ("<p>SumUp was used to pay for a Döner at Coco Banh in Berlin, Germany</p>");
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  setTimeout(function() {infowindow.open(map,marker)}, startDelayed(8000));
  setTimeout(function() {infowindow.close()}, startDelayed(5000));  

  // zoom out again
  setTimeout(function() {zoomOut(oldZoom)}, startDelayed(2000));

  // center again
  setTimeout(function() {map.panTo(oldCenter)}, startDelayed(8000));

}
    infowindow = new google.maps.InfoWindow({
   content: contentString
});


}
4

1 に答える 1

12

The problem is that the bounds and center are not set yet. To get them you need to do it in a listener on zoom_changed (for zoom); center_changed (for center). Available Map events are listed in the documentation, under events. You can use the addListenerOnce to only do it once (the first time).

Something like this will work:

var oldZoom = null;
var oldCenter = null;
google.maps.event.addListenerOnce(map, "zoom_changed", function() { oldZoom = map.getZoom(); });
google.maps.event.addListenerOnce(map, "center_changed", function() { oldCenter = map.getCenter(); });

proof of concept fiddle

You won't be able to use them until after those events have fired.

code snippet:

var map;
var ENDZOOM = 0;

function initialize() {

  // CUSTOM PLACES
  var latlng = new google.maps.LatLng(51, 10);
  var germany = new google.maps.LatLng(51, 10);
  var myLatlng = new google.maps.LatLng(49, 12);

  // DEFINE STYLE
  var styles = [{
    "stylers": [{
      "invert_lightness": true
    }]
  }];

  // MARKER STYLES
  var coin_image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
  var merch_image = 'http://maps.google.com/mapfiles/ms/micons/yellow.png';

  // DEFINE OPTIONS FOR MAP
  var myOptions = {
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_TOP
    },
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  // CREATE MAP OBJECT
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  map.setOptions({
    styles: styles
  });

  // select zoom, etc by defining 2 points
  var southWest = new google.maps.LatLng(45, -10);
  var northEast = new google.maps.LatLng(55, 15);
  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

  placeMarker(southWest);
  placeMarker(northEast);

  // Place Random Markers
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 50; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
      southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      icon: merch_image
    });
    var j = i + 1;
    marker.setTitle(j.toString());
  }


  // TRANSACTION MARKERS

  // ONE FULL CYCLE
  // set marker

  var trans_marker = new google.maps.LatLng(52.31799, 13.241904);
  var marker = new google.maps.Marker({
    position: trans_marker,
    map: map,
    animation: google.maps.Animation.DROP,
    title: "Hello World!",
    icon: coin_image
  });

  var oldZoom = null;
  var oldCenter = null;
  google.maps.event.addListenerOnce(map, "zoom_changed", function() {
    oldZoom = map.getZoom();
    console.log(oldZoom);
    console.log(oldCenter.toString());
  });
  google.maps.event.addListenerOnce(map, "center_changed", function() {
    oldCenter = map.getCenter();
  });



  console.log(map);
  oldMap = map;
  console.log(oldMap);


  // pan to marker
  setTimeout(function() {
    map.panTo(trans_marker)
  }, startDelayed(3000));

  // zoom in on marker
  setTimeout(function() {
    zoomIn(ENDZOOM)
  }, startDelayed(1000));

  // show info window
  var contentString = "<h3>Döner @ Coco Banh</h3>";
  contentString += ("<p>SumUp was used to pay for a Döner at Coco Banh in Berlin, Germany</p>");
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  setTimeout(function() {
    infowindow.open(map, marker)
  }, startDelayed(8000));
  setTimeout(function() {
    infowindow.close()
  }, startDelayed(5000));

  // zoom out again
  setTimeout(function() {
    zoomOut(oldZoom)
  }, startDelayed(2000));

  // center again
  setTimeout(function() {
    map.panTo(oldCenter)
  }, startDelayed(8000));


  infowindow = new google.maps.InfoWindow({
    content: contentString
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function placeMarker(latlng) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  })
}

function startDelayed() {};

function zoomIn(zoom) {};

function zoomOut(zoom) {};
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

于 2012-11-17T22:27:25.637 に答える