0

我正在尝试在 Google 地图上实现一些寻求的自定义方向服务。我有一堆预制路径，我根据两个下拉框中的选择隐藏和显示。到目前为止效果很好。但是，我想在路径的开始和结束处添加标记，我该怎么做呢？

路径，我想在路径的开始和结束处添加一个标记。

这是一个工作示例http://jsfiddle.net/PwFDM/

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html {
                height: 100%
            }
            body {
                height: 100%;
                margin: 0;
                padding: 0
            }
            #map_canvas {
                height: 100%
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9W-wEHa5KzvcntFzGgyTwWtx4wvrs0os&sensor=true">

        </script>
    </head>

    <body>
        <div><strong>Start: </strong>

            <select id="start">
                <option>Building 1</option>
                <option>Building 2</option>
                <option>Building 3</option>
                <option>Building 4</option>
                <option>Building 5</option>
                <option>Building 6</option>
                <option>Building 7</option>
                <option>Building 8</option>
            </select> <strong>End:</strong> 
            <select id="end">
                <option>Building 1</option>
                <option>Building 2</option>
                <option>Building 3</option>
                <option>Building 4</option>
                <option>Building 5</option>
                <option>Building 6</option>
                <option>Building 7</option>
                <option>Building 8</option>
            </select>
            <input type="button" onclick="drawDirections();" value="GO" />
        </div>
        <div id="map" style="width: 100%; height: 100%"></div>
        <script type="text/javascript">
            var mapOptions = {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(51.507684, 0.063686),
                zoom: 17
            };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            // Predefine all the paths
            var paths = [];

            paths['1_to_2'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.508445, 0.063944),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507457, 0.064019)],
                strokeColor: '#FF0000'
            });
            paths['1_to_3'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.508445, 0.063944),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507494, 0.063399)],
                strokeColor: '#FF0000'
            });
            paths['1_to_4'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.508445, 0.063944),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507709, 0.063301)],
                strokeColor: '#FF0000'
            });
            paths['1_to_5'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.508445, 0.063944),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.50747, 0.062659),
                new google.maps.LatLng(51.507501, 0.062467)],
                strokeColor: '#FF0000'
            });
            paths['1_to_6'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.508445, 0.063944),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['1_to_7'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.508445, 0.063944),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['1_to_8'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.508445, 0.063944),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507248, 0.065797),
                new google.maps.LatLng(51.507449, 0.065805),
                new google.maps.LatLng(51.507442, 0.066004)],
                strokeColor: '#FF0000'
            });

            //---------------------------------------------------------
            paths['2_to_3'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507457, 0.064019),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507494, 0.063399)],
                strokeColor: '#FF0000'
            });
            paths['2_to_4'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507457, 0.064019),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507709, 0.063301)],
                strokeColor: '#FF0000'
            });
            paths['2_to_5'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507457, 0.064019),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.50747, 0.062659),
                new google.maps.LatLng(51.507501, 0.062467)],
                strokeColor: '#FF0000'
            });
            paths['2_to_6'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507457, 0.064019),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['2_to_7'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507457, 0.064019),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['2_to_8'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507457, 0.064019),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507248, 0.065797),
                new google.maps.LatLng(51.507449, 0.065805),
                new google.maps.LatLng(51.507442, 0.066004)],
                strokeColor: '#FF0000'
            });

            //---------------------------------------------------------
            paths['3_to_4'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507494, 0.063399),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507709, 0.063301)],
                strokeColor: '#FF0000'
            });
            paths['3_to_5'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507494, 0.063399),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.50747, 0.062659),
                new google.maps.LatLng(51.507501, 0.062467)],
                strokeColor: '#FF0000'
            });
            paths['3_to_6'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507494, 0.063399),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['3_to_7'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507494, 0.063399),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['3_to_8'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507494, 0.063399),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507248, 0.065797),
                new google.maps.LatLng(51.507449, 0.065805),
                new google.maps.LatLng(51.507442, 0.066004)],
                strokeColor: '#FF0000'
            });

            //-------------------------------------------------------------
            paths['4_to_5'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507709, 0.063301),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.50747, 0.062659),
                new google.maps.LatLng(51.507501, 0.062467)],
                strokeColor: '#FF0000'
            });
            paths['4_to_6'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507709, 0.063301),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['4_to_7'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507709, 0.063301),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['4_to_8'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507709, 0.063301),
                new google.maps.LatLng(51.507474, 0.063877),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507248, 0.065797),
                new google.maps.LatLng(51.507449, 0.065805),
                new google.maps.LatLng(51.507442, 0.066004)],
                strokeColor: '#FF0000'
            });

            //---------------------------------------------------------------
            paths['5_to_6'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507501, 0.062467),
                new google.maps.LatLng(51.50747, 0.062659),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['5_to_7'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507501, 0.062467),
                new google.maps.LatLng(51.50747, 0.062659),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['5_to_8'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507501, 0.062467),
                new google.maps.LatLng(51.50747, 0.062659),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507248, 0.065797),
                new google.maps.LatLng(51.507449, 0.065805),
                new google.maps.LatLng(51.507442, 0.066004)],
                strokeColor: '#FF0000'
            });

            //----------------------------------------------------
            paths['6_to_7'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507275, 0.062455),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507275, 0.062455)],
                strokeColor: '#FF0000'
            });
            paths['6_to_8'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507275, 0.062455),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507248, 0.065797),
                new google.maps.LatLng(51.507449, 0.065805),
                new google.maps.LatLng(51.507442, 0.066004)],
                strokeColor: '#FF0000'
            });

            //--------------------------------------------------------
            paths['7_to_8'] = new google.maps.Polyline({
                path: [
                new google.maps.LatLng(51.507275, 0.062455),
                new google.maps.LatLng(51.507293, 0.062681),
                new google.maps.LatLng(51.507287, 0.063839),
                new google.maps.LatLng(51.507248, 0.065797),
                new google.maps.LatLng(51.507449, 0.065805),
                new google.maps.LatLng(51.507442, 0.066004)],
                strokeColor: '#FF0000'
            });

            function drawDirections() {
                var start = 1 + document.getElementById('start').selectedIndex;
                var end = 1 + document.getElementById('end').selectedIndex;
                var i;

                if (start === end) {
                    alert('Please choose different buildings');
                } else {
                    // Hide all polylines
                    for (i in paths) {
                        paths[i].setOptions({
                            map: null
                        });
                    }

                    // Show the route
                    if (typeof paths['' + start + '_to_' + end] !== 'undefined') {
                        paths['' + start + '_to_' + end].setOptions({
                            map: map
                        });
                    } else if (typeof paths['' + end + '_to_' + start] !== 'undefined') {
                        paths['' + end + '_to_' + start].setOptions({
                            map: map
                        });
                    }

                    var laLatLng = new google.maps.LatLng(51.507684, 0.063686);
                    map.panTo(laLatLng);
                    map.setZoom(17);
                    //panTo(latLng:LatLng)
                }
            }
        </script>
    </body>

</html>
4

1 回答 1

1

要在路径的每一端添加一个标记，请执行以下操作：

  paths['' + start + '_to_' + end].setOptions({
      map: map
  });
  // first point of polyline
  createMarker(paths['' + start + '_to_' + end].getPath().getAt(0), 'start', 'start', 'green'); 
  // last point of polyline
  createMarker(paths['' + start + '_to_' + end].getPath().getAt(paths['' + start + '_to_' + end].getPath().getLength()-1), 'end', 'end', 'red');

jsfiddle

于 2013-02-15T23:07:55.730 回答