How to make the little guy in google map snap back to the nearest point if threw away?_问答_开发者

How to make the little guy in google map snap back to the nearest point if threw away?

开发者 https://www.devze.com 2023-01-31 15:11 出处：网络

In this google map sample: http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html

If the user dropped the little guy far away in the middle of the ocean for example, it disappears.

But in the main google map website http://maps.google.com/ If you made it show the street view, and the user dragged the guy away it get back automatically to the previous point.

What is missed in the first example to make it behave the same as the google map website?

here is the code of the sample:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Lay开发者_Python百科er</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">

  function initialize() {
    var fenway = new google.maps.LatLng(42.345573,-71.098326);
    var mapOptions = {
      center: fenway,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), mapOptions);
    var panoramaOptions = {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
    map.setStreetView(panorama);
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 400px; height: 300px"></div>
  <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>

To do this, add an event listener to position_changed and use it to store the last (valid) location that pegman was dropped.

google.maps.event.addListener(panorama, 'position_changed', function() {
  // Store position
});

And then add an event listener to visibility_changed (which is triggered when pegman is dropped in the ocean) to set him back to the last known location:

google.maps.event.addListener(panorama, 'visible_changed', function() {
  if (panorama.getVisible() == false && last_location) {
    panorama.setPosition(last_location);
  }
});