使用GoogleMapsJavaScriptAPI绘制使用坐标的路径_Javascript_Google Maps

使用GoogleMapsJavaScriptAPI绘制使用坐标的路径

javascript google-maps

使用GoogleMapsJavaScriptAPI绘制使用坐标的路径,javascript,google-maps,Javascript,Google Maps,与一个警察部门合作，该部门建立了车牌识别摄像头网络，在有限的时间内将车牌图像和车牌信息记录到MySQL数据库中。如果触发琥珀色警报（儿童绑架），他们希望能够查询数据库，获得哪些摄像头发现了车牌的列表，然后在谷歌地图上绘制显示路线的摄像头。我有每个摄像头的经纬度，可以生成一张地图，但它只显示摄像头，不显示所走的路线我有一个脚本，它将从数据库中提取数据并创建一个数组供java脚本使用。现在为了测试，我刚刚将数组添加到脚本中。我一直在尝试我能想到的一切，从道路点（我认为这是我需要的）到驾驶方向，但找

与一个警察部门合作，该部门建立了车牌识别摄像头网络，在有限的时间内将车牌图像和车牌信息记录到MySQL数据库中。如果触发琥珀色警报（儿童绑架），他们希望能够查询数据库，获得哪些摄像头发现了车牌的列表，然后在谷歌地图上绘制显示路线的摄像头。我有每个摄像头的经纬度，可以生成一张地图，但它只显示摄像头，不显示所走的路线

我有一个脚本，它将从数据库中提取数据并创建一个数组供java脚本使用。现在为了测试，我刚刚将数组添加到脚本中。我一直在尝试我能想到的一切，从道路点（我认为这是我需要的）到驾驶方向，但找不到一个很好的例子来使用十字路口摄像机的坐标在路线上绘制点。以下是我到目前为止的情况：


我的谷歌地图
#地图{
高度：500px；
宽度：750px；
}
我的谷歌地图
函数initMap（）{
//地图选项
变量选项={
缩放：12，
中心：{lat:40.355048，lng:-79.835499}
}
//新地图
var map=new google.maps.map（document.getElementById（'map'），options）；
//听一听地图上的点击
google.maps.event.addListener（映射，'click'，函数（事件）{
//添加标记
addMarker（{coords:event.latLng}）；
});
//标记数组
变量标记=[
{
协调：{lat:40.337629，lng:-79.808826}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelW.png',
内容：'LINCOLN WAY WEST@48 2017/12/22 17:49'
},
{
协调：{lat:40.337385，lng:-79.809023}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelS.png',
内容：'48 SOUTH@LINCOLN WAY 2017/12/22 17:53'
},
{
协调：{lat:40.355048，lng:-79.835499}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelE.png',
内容：'Rt.148 East@Hartman 2017/12/22 20:14'
},
{
坐标：{lat:40.384877，lng:-79.824477}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelW.png',
内容：“Rt.30 West@Warren Dr.2017/12/22 20:22”
},
{
坐标：{lat:40.384488，lng:-79.824129}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelE.png',
内容：'Rt.30 East@Warren Dr.2017/12/22 21:29'
},
{
协调：{lat:40.355285，lng:-79.834959}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelW.png',
内容：'Rt.148 West@Hartman 2017/12/22 21:38'
},
{
协调：{lat:40.355048，lng:-79.835499}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelE.png',
内容：'Rt.148 East@Hartman 2017/12/22 21:46'
},
{
协调：{lat:40.337385，lng:-79.809023}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelS.png',
内容：'48 SOUTH@LINCOLN WAY 2017/12/22 22:19'
}
];
//循环标记
对于（变量i=0；i

在我侄女javascript开发人员的帮助下，我能够让它正常工作

    <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>My Google Map</title>
          <style>
            #map{
              height:500px;
              width:750px;
            }
          </style>
        </head>
        <body>
          <h1>My Google Map</h1>
          <div id="map"></div>
          <script>
            function initMap(){
              // Map options
              var options = {
                zoom:12,
                center:{lat:40.355048,lng:-79.835499}
              }

              // New map
              var map = new google.maps.Map(document.getElementById('map'), options);
              var directionsService = new google.maps.DirectionsService();
              var directionsDisplay = new google.maps.DirectionsRenderer();
              directionsDisplay.setMap(map);
              var request = {   travelMode: google.maps.TravelMode.DRIVING, optimizeWaypoints: true, waypoints: []  };

              // Listen for click on map
              google.maps.event.addListener(map, 'click', function(event){
                // Add marker
                addMarker({coords:event.latLng});
              });

              // Array of markers
              var markers = [
                {
                 coords:{lat:40.337385,lng:-79.809023},
                iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelS.png',
                content:'<h1>48 SOUTH @ LINCOLN WAY 2017/12/22 17:53</h1>'
                },
                {
                 coords:{lat:40.355048,lng:-79.835499},
                iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelE.png',
                content:'<h1>Rt. 148 East @ Hartman 2017/12/22 20:14</h1>'
                },
                {
                 coords:{lat:40.384877,lng:-79.824477},
                iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelW.png',
                content:'<h1>Rt.30 West @ Warren Dr. 2017/12/22 20:22</h1>'
                }
              ];

              // Loop through markers
              for(var i = 0;i < markers.length;i++){
                // Add marker
                addMarker(markers[i]);
              }

              // Add Marker Function
              function addMarker(props){
                var marker = new google.maps.Marker({
                  position:props.coords,
                  map:map,
                  icon:props.iconImage
                });

                // Check for customicon
                if(props.iconImage){
                  // Set icon image
                  marker.setIcon(props.iconImage);
                }

                // Check content
                if(props.content){
                  var infoWindow = new google.maps.InfoWindow({
                    content:props.content
                  });

                  marker.addListener('click', function(){
                    infoWindow.open(map, marker);
                  });
                }     
                if (i === 0) { 
                    request.origin = props.coords; 
                }
                else if (i === markers.length - 1) {
                    request.destination = props.coords;
                    }
                    else {
                        if (props.coords) {
                        request.waypoints.push({
                        location: props.coords,
                        stopover: true
                            })
                        }

                    }
                //End of Add Marker Function
                }
            directionsService.route(request,function(response,status){
                if (status == "OK"){
                    directionsDisplay.setDirections(response)
                }
            })
            }
          </script>
          <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIZsk8SNPVQMm8Tu4TXieZT0xIqkMSECo&callback=initMap">
            </script>
            <h4>A - PLATE:KCJ1372, 48 SOUTH @ LINCOLN WAY, 2017/12/22 17:53</h4>
            <h4>B - PLATE:KCJ1372, Rt. 148 East @ Hartman, 2017/12/22 20:14</h4>
            <h4>C - PLATE:KCJ1372, Rt.30 West @ Warren Dr., 2017/12/22 20:22</h4>

        </body>
        </html>


我的谷歌地图
#地图{
高度：500px；
宽度：750px；
}
我的谷歌地图
函数initMap（）{
//地图选项
变量选项={
缩放：12，
中心：{lat:40.355048，lng:-79.835499}
}
//新地图
var map=new google.maps.map（document.getElementById（'map'），options）；
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
方向显示.setMap（地图）；
var请求={travelMode:google.maps.travelMode.DRIVING，optimizeWaypoints:true，waypoints:[]}；
//听一听地图上的点击
google.maps.event.addListener（映射，'click'，函数（事件）{
//添加标记
addMarker（{coords:event.latLng}）；
});
//标记数组
变量标记=[
{
协调：{lat:40.337385，lng:-79.809023}，
iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelS.png',
内容：'48 SOUTH@LINCOLN WAY 2017/12/22 17:53'
},
{
协调：{lat:40.355048，lng:-79.835499}，
iconImage:'http://52.15.229.165/nconf/google_images
    <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>My Google Map</title>
          <style>
            #map{
              height:500px;
              width:750px;
            }
          </style>
        </head>
        <body>
          <h1>My Google Map</h1>
          <div id="map"></div>
          <script>
            function initMap(){
              // Map options
              var options = {
                zoom:12,
                center:{lat:40.355048,lng:-79.835499}
              }

              // New map
              var map = new google.maps.Map(document.getElementById('map'), options);
              var directionsService = new google.maps.DirectionsService();
              var directionsDisplay = new google.maps.DirectionsRenderer();
              directionsDisplay.setMap(map);
              var request = {   travelMode: google.maps.TravelMode.DRIVING, optimizeWaypoints: true, waypoints: []  };

              // Listen for click on map
              google.maps.event.addListener(map, 'click', function(event){
                // Add marker
                addMarker({coords:event.latLng});
              });

              // Array of markers
              var markers = [
                {
                 coords:{lat:40.337385,lng:-79.809023},
                iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelS.png',
                content:'<h1>48 SOUTH @ LINCOLN WAY 2017/12/22 17:53</h1>'
                },
                {
                 coords:{lat:40.355048,lng:-79.835499},
                iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelE.png',
                content:'<h1>Rt. 148 East @ Hartman 2017/12/22 20:14</h1>'
                },
                {
                 coords:{lat:40.384877,lng:-79.824477},
                iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelW.png',
                content:'<h1>Rt.30 West @ Warren Dr. 2017/12/22 20:22</h1>'
                }
              ];

              // Loop through markers
              for(var i = 0;i < markers.length;i++){
                // Add marker
                addMarker(markers[i]);
              }

              // Add Marker Function
              function addMarker(props){
                var marker = new google.maps.Marker({
                  position:props.coords,
                  map:map,
                  icon:props.iconImage
                });

                // Check for customicon
                if(props.iconImage){
                  // Set icon image
                  marker.setIcon(props.iconImage);
                }

                // Check content
                if(props.content){
                  var infoWindow = new google.maps.InfoWindow({
                    content:props.content
                  });

                  marker.addListener('click', function(){
                    infoWindow.open(map, marker);
                  });
                }     
                if (i === 0) { 
                    request.origin = props.coords; 
                }
                else if (i === markers.length - 1) {
                    request.destination = props.coords;
                    }
                    else {
                        if (props.coords) {
                        request.waypoints.push({
                        location: props.coords,
                        stopover: true
                            })
                        }

                    }
                //End of Add Marker Function
                }
            directionsService.route(request,function(response,status){
                if (status == "OK"){
                    directionsDisplay.setDirections(response)
                }
            })
            }
          </script>
          <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIZsk8SNPVQMm8Tu4TXieZT0xIqkMSECo&callback=initMap">
            </script>
            <h4>A - PLATE:KCJ1372, 48 SOUTH @ LINCOLN WAY, 2017/12/22 17:53</h4>
            <h4>B - PLATE:KCJ1372, Rt. 148 East @ Hartman, 2017/12/22 20:14</h4>
            <h4>C - PLATE:KCJ1372, Rt.30 West @ Warren Dr., 2017/12/22 20:22</h4>

        </body>
        </html>