Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByrgAtWpei65izUKYhdyr9-r54rrMZ8Zc&callback=initialize">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="{{ asset('ico/opengts.png') }}">
    <title>Open GTS</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="themes/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="{{ asset('css/carousel.css') }}" rel="stylesheet">


    <!-- NAVBAR
    ================================================== -->

    <div class="navbar-wrapper">
        <div class="container">

            <div class="navbar navbar-inverse navbar-static-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand active" href="#">Geo Punch Solution</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class=""><a href="{{ url('/') }}">Home</a></li>
                            <li class=""><a href="{{ url('aboutUs') }}">About Us</a></li>
                            <li class=""><a href="{{ url('accountAdmin') }}">Account Admin</a></li>
                            <li><a href="{{ url('userAdmin') }}">User Admin </a></li>

                            <li><a href="{{ url('vehicleAdmin') }}">Vehicle Admin </a></li>
                            <li><a href="{{ url('groupAdmin') }}">Group Admin </a></li>

                            <li><a href="{{ url('geozoneAdmin') }}">Geozone Admin </a></li>
                            <li><a href="{{ url('changePassword') }}">Change Password </a></li>
                        </ul>
                    </div>
                </div>
            </div>
<script>
function initialize() {
var map = document.getElementById('map');
// Put all locations into array
                    var locations = [
                        @foreach ($location as $locations)
                        [ {{ $locations->latitude }}, {{ $locations->longitude }} ],
@endforeach
];
for (i = 0; i < locations.length; i++) {
                     if(i==0)
                                {
                                    // Initialise the map
                                    var map_options = {
                                        center: new google.maps.LatLng(locations[0][0], locations[0][1]),
                                        //position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                                        zoom: 10,
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                    }

                                    var maps = new google.maps.Map(map, map_options);
                                }



                      //  var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                            //center:location,
                            map: maps,
                            icon:'jeep.png'
                            //animation:google.maps.Animation.BOUNCE
                        });
}

                    var locationPath = new google.maps.Polyline
                    ({
                        path:new google.maps.LatLng(locations[i][0], locations[i][1]),
                        geodesic: true,
                        strokeColor: '#FFCCFF',
                        strokeOpacity: 2.0,
                        strokeWeight:2,
                        map:maps

                    });
                   locationPath.setMap(map);
 }

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
                    infoWindow.setPosition(pos);
                    infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
                }
              </script>

            <style type="text/css">
                #map {
                    width: 1170px;
                    height: 570px;
                    margin-top: 100px;
                    margin-left: 100px;
                }
            </style>
        </div>
    </div>
</head>
<body>

<div id="map"></div>
<p id="error"></p>
</body>
{{--<!-- Placed at the end of the document so the pages load faster -->--}}
{{--<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>--}}
{{--<script src="{{ asset('js/bootstrap.min.js') }}"></script>--}}
{{--<script src="{{ asset('js/holder.js') }}"></script>--}}

{{--</body>--}}
</html>

这是我的地图页面。使用此代码，我可以获取latLng并在地图上显示。

但是，我无法在标记之间画线。

任何人都可以帮我找出我在代码中犯的错误吗？我正在使用谷歌地图，框架是Laravel 5.2。

所有标记都指向完美。只有问题在于Polyline方法。我应该在我的程序或Laravel中将代码写在哪里，或者我们是否需要使用任何其他方法来绘制线？我是Laravel的新人。所以，我需要你的帮助才能从这里出来。任何回复将不胜感激。提前谢谢。

Answer 1

假设您可以在地图上显示标记，您可以使用以下代码在标记之间绘制线条。

// Put these with your "Initialise the map" section

// init the polyline and set map
var poly = new google.maps.Polyline({
    strokeColor: '#FFCCFF',
    strokeOpacity: 2.0,
    strokeWeight:2,
    map:maps
  });
// Get the path form polyLine
var path = poly.getPath();

在每个for循环中运行（与制造商相同）

// Push the location into PolyLine's path
path.push(new google.maps.LatLng(locations[i][0], locations[i][1]))

代码：

JSbin：http://jsbin.com/kivukisamu/edit?html,js,output

function initialize() {
    var map;
    var poly;
    var path;

    // Put all locations into array
    var locations = [
        [0, 1],
        [30, 20]
    ];
    for (i = 0; i < locations.length; i++) {
        if(i==0)
        {
            // Initialise the map
            var map_options = {
                center: new google.maps.LatLng(locations[0][0], locations[0][1]),
                //position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map'), map_options);
            poly = new google.maps.Polyline({
                strokeColor: '#FFCCFF',
                strokeOpacity: 2.0,
                strokeWeight:10,
                map:map
            });
            path = poly.getPath();
        }

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
            //center:location,
            map: map,
            icon:'jeep.png'
            //animation:google.maps.Animation.BOUNCE
        });

        path.push(new google.maps.LatLng(locations[i][0], locations[i][1]));
    }

}

参考：https://developers.google.com/maps/documentation/javascript/examples/polyline-complex

Answer 2

PolyLine对象的path属性需要lat / lng的数组或数组文字。例如：

path: {lat: 37.772, lng: -122.214}

所以请替换您当前的代码：

path:new google.maps.LatLng(locations[i][0], locations[i][1]),

包含您希望与PolyLine连接的两个标记的坐标：

path: [{lat: 37.772, lng: -122.214},
       {lat: 21.291, lng: -157.821}]

如何使用laravel5.2在谷歌地图中的标记之间绘制线条

2 个答案: