Fatal编程技术网
  • javascript/
  • Javascript 如何在谷歌地图上绘制沿着佩格曼路径的多段线？

Javascript 如何在谷歌地图上绘制沿着佩格曼路径的多段线？

javascript html google-maps google-maps-api-3 maps

Javascript 如何在谷歌地图上绘制沿着佩格曼路径的多段线？,javascript,html,google-maps,google-maps-api-3,maps,Javascript,Html,Google Maps,Google Maps Api 3,Maps,我正在使用GoogleMaps API用HTML和JavaScript创建一个简单的游戏。我现在的代码在屏幕左侧显示地图视图，在屏幕右侧显示街道视图。当你移动箭头键时，pegman（在谷歌地图中在街道上移动的小家伙）会根据按下的键旋转并前后移动（这是谷歌地图的默认功能）。我想做的是添加一条不断更新的多段线，显示Pegman访问过的所有地方。我一直在参考[这里][1]和[这里][2]的文档。 HTML代码： <!DOCTYPE html> <html> <head

我正在使用GoogleMaps API用HTML和JavaScript创建一个简单的游戏。我现在的代码在屏幕左侧显示地图视图，在屏幕右侧显示街道视图。当你移动箭头键时，pegman（在谷歌地图中在街道上移动的小家伙）会根据按下的键旋转并前后移动（这是谷歌地图的默认功能）。我想做的是添加一条不断更新的多段线，显示Pegman访问过的所有地方。我一直在参考[这里][1]和[这里][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]: 


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

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);
          }
        }

      }

var-poly；
var映射；
函数initMap（）{
var mapDiv=document.getElementById（'map'）；
var map=new google.maps.map（mapDiv{
中心：{lat:30.565244，lng:-97.671010}，
缩放：14
});
var txstate={lat:30.569858，lng:-97.655918}；
var panorama=新建google.maps.StreetViewPanorama(
document.getElementById（'pano'）{
位置：txstate，
pov：{
标题：34，
投球：10
}
});
地图设置树视图（全景）；
poly=新的google.maps.Polyline({
strokeColor:“#000000”，
笔划不透明度：1.0，
冲程重量：3
});
poly.setMap（map）；
//为单击事件添加侦听器
map.addListener（'position\u change'，addLatLng）；
}
//处理地图上的单击事件，并向多段线添加新点。
功能添加（事件）{
var path=poly.getPath（）；
//因为path是一个MVCArray，所以我们可以简单地附加一个新的坐标
//它会自动出现。
路径推送（event.latLng）；
//A点
//现在硬编码为德克萨斯州立大学
var图像=”https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png“；//星星
var pointA=新的google.maps.Marker({
职位：{lat:30.567989，lng:-97.655153}，
地图：地图，
标题：“德克萨斯州”，
图标：图像，
动画：google.maps.animation.DROP
});
var contentString_A=‘德克萨斯州立大学圆岩分校’；
var infowindow_A=新的google.maps.infowindow({
内容：contentString_A
});
函数信息_A（）{
信息窗口A.打开（地图、点A）；
}
//B点
//现在硬编码为H-E-B
var pointB=新的google.maps.Marker({
位置：{lat:30.560619，lng:-97.688338}，
地图：地图，
标题:"heb",，
图标：图像，
动画：google.maps.animation.DROP
});
var contentString_B='h-e-B'；
var infowindow_B=新的google.maps.infowindow({
内容：contentString_B
});
函数信息_B（）{
信息窗口打开（地图，点B）；
}
pointA.addListener（'click'，info_A）；
pointB.addListener（'click'，info_B）；
函数toggleBounce（）{
if（marker.getAnimation（）！==null）{
marker.setAnimation（null）；
}否则{
setAnimation（google.maps.Animation.BOUNCE）；
}
}
}
当触发
panorama
“pano\u changed”事件时，需要调用
addLatLng（）
函数，新全景的位置为：

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

代码片段：

var-poly；
var映射；
尖端变种；
var pointB；
函数initMap（）{
var mapDiv=document.getElementById（'map'）；
map=新的google.maps.map（mapDiv{
中心：{
拉脱维亚：30.565244，
液化天然气：-97.671010
},
缩放：14
});
变量txstate={
拉脱维亚：30.569858，
液化天然气：-97.655918
};
var panorama=新建google.maps.StreetViewPanorama(
document.getElementById（'pano'）{
位置：txstate，
pov：{
标题：34，
投球：10
}
});
google.maps.event.addListener（panorama，'pano_changed'，function（）{
addLatLng({
latLng:panorama.getPosition（）
});
如果（！map.getBounds（）.contains（panorama.getPosition（）））{
map.setCenter（panorama.getPosition（））；
}
})
地图设置树视图（全景）；
poly=新的google.maps.Polyline({
strokeColor:“#000000”，
笔划不透明度：1.0，
冲程重量：3
});
poly.setMap（map）；
//为单击事件添加侦听器
map.addListener（'position\u change'，addLatLng）；
}
//处理地图上的单击事件，并向多段线添加新点。
功能添加（事件）{
var path=poly.getPath（）；
//因为path是一个MVCArray，所以我们可以简单地附加一个新的坐标
//它会自动出现。
路径推送（event.latLng）；
//A点
//现在硬编码为德克萨斯州立大学
var图像=”https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png“；//星星
如果（！pointA）{
pointA=新的google.maps.Marker({
职位：{
拉脱维亚：30.567989，
液化天然气：-97.655153
},
地图：地图，
标题：“德克萨斯州”，
图标：图像，
动画：google.maps.animation.DROP
});
var contentString_A=‘德克萨斯州立大学圆岩分校’；
var infowindow_A=新的google.maps.infowindow({
内容：contentString_A
});
pointA.addListener（'click'，info_A）；
}
函数信息_A（）{
信息窗口A.打开（地图、点A）；
}
//B点
//现在硬编码为H-E-B
如果（！点B）{
var pointB=新的google.maps.Marker({
职位：{
拉脱维亚：30.560619，
液化天然气：-97.688338
},