衣夹人

衣夹人

关注
发信
关注(28)粉丝(399)

javascript - 如何在GoogleMap上沿着衣夹人路径绘制折线？

我正在使用GoogleMaps API用HTML和JavaScript创建一个简单的游戏。到目前为止，我拥有的代码现在在屏幕左侧显示地图视图，在屏幕右侧显示街道视图。当您左右移动箭头键时，衣夹人（即在GoogleMaps中在街上四处走动的小家伙）会根据按下的键旋转并前后移动（这是GoogleMaps的默认功能）。我想做的是添加一个不断更新的折线，以显示衣夹人访问过的所有地方。我一直在参考文档[here] [1]和[here] [2]。
HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="map_with_markers.css">
    <script type="text/javascript" src="pegman_lines.js"></script>
  </head>
  <body>
    <h3>A to B</h3>
    <div id="map"></div>
    <div id="pano"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap">
    </script>
  </body>
</html>


  [1]: https://developers.google.com/maps/documentation/javascript/streetview?hl=nl#StreetViewEvents
  [2]:


https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions

JavaScript代码：

    var poly;
    var map;
  function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 30.565244, lng: -97.671010},
            zoom: 14
        });

        var txstate = {lat: 30.569858, lng: -97.655918};
        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('pano'), {
              position: txstate,
              pov: {
                heading: 34,
                pitch: 10
              }
            });
        map.setStreetView(panorama);

       poly = new google.maps.Polyline({
          strokeColor: '#000000',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
        poly.setMap(map);

        // Add a listener for the click event
        map.addListener('position_change', addLatLng);
      }
      // Handles click events on a map, and adds a new point to the Polyline.
      function addLatLng(event) {
        var path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(event.latLng);

        //point A
        //hard-coded as Texas State University right now
        var image = "https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png"; //STAR

        var pointA = new google.maps.Marker({
            position: {lat: 30.567989, lng: -97.655153},
            map: map,
            title: 'tx state',
            icon: image,
            animation: google.maps.Animation.DROP
        });
        var contentString_A = '<h5>texas state university at round rock</h5>';
        var infowindow_A = new google.maps.InfoWindow({
            content: contentString_A
        });
        function info_A(){
            infowindow_A.open(map, pointA);
        }


        //point B
        //hard-coded as H-E-B right now
        var pointB = new google.maps.Marker({
            position: {lat: 30.560619, lng: -97.688338},
            map: map,
            title: 'heb',
            icon: image,
            animation: google.maps.Animation.DROP
        });
        var contentString_B = '<h5>h-e-b</h5>';
        var infowindow_B = new google.maps.InfoWindow({
            content: contentString_B
        });
        function info_B(){
            infowindow_B.open(map, pointB);
        }



        pointA.addListener('click', info_A);
        pointB.addListener('click', info_B);

        function toggleBounce() {
          if (marker.getAnimation() !== null) {
            marker.setAnimation(null);
          } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
          }
        }

      }

最佳答案

触发addLatLng()“ pano_changed”事件时，需要使用新全景图的位置调用panorama函数：

google.maps.event.addListener(panorama, 'pano_changed', function(){
  addLatLng({latLng:panorama.getPosition()});
}):


proof of concept fiddle

代码段：



var poly;
var map;
var pointA;
var pointB;

function initMap() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
      center: {
        lat: 30.565244,
        lng: -97.671010
      },
      zoom: 14
    });

    var txstate = {
      lat: 30.569858,
      lng: -97.655918
    };
    var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: txstate,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
    google.maps.event.addListener(panorama, 'pano_changed', function() {
      addLatLng({
        latLng: panorama.getPosition()
      });
      if (!map.getBounds().contains(panorama.getPosition())) {
        map.setCenter(panorama.getPosition());
      }
    })
    map.setStreetView(panorama);

    poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);

    // Add a listener for the click event
    map.addListener('position_change', addLatLng);
  }
  // Handles click events on a map, and adds a new point to the Polyline.

function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  //point A
  //hard-coded as Texas State University right now
  var image = "https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png"; //STAR
  if (!pointA) {
    pointA = new google.maps.Marker({
      position: {
        lat: 30.567989,
        lng: -97.655153
      },
      map: map,
      title: 'tx state',
      icon: image,
      animation: google.maps.Animation.DROP
    });
    var contentString_A = '<h5>texas state university at round rock</h5>';
    var infowindow_A = new google.maps.InfoWindow({
      content: contentString_A
    });
    pointA.addListener('click', info_A);

  }

  function info_A() {
    infowindow_A.open(map, pointA);
  }

  //point B
  //hard-coded as H-E-B right now
  if (!pointB) {
    var pointB = new google.maps.Marker({
      position: {
        lat: 30.560619,
        lng: -97.688338
      },
      map: map,
      title: 'heb',
      icon: image,
      animation: google.maps.Animation.DROP
    });
    var contentString_B = '<h5>h-e-b</h5>';
    var infowindow_B = new google.maps.InfoWindow({
      content: contentString_B
    });
    pointB.addListener('click', info_B);
  }

  function info_B() {
    infowindow_B.open(map, pointB);
  }

  function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map {
  height: 100%;
  width: 45%;
  float: left;
  margin: 0px;
  padding: 0px
}
#pano {
  height: 100%;
  width: 45%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<h3>A to B</h3>
<div id="map"></div>
<div id="pano"></div>

10-06 01:30
Powered by LMLPHP ©2024 衣夹人 0.027708