0

Google マップにカスタム ルート案内サービスを実装しようとしています。2 つのドロップダウン ボックスからの選択に応じて、非表示にしたり表示したりする事前に作成されたパスがたくさんあります。これまでのところ、うまく機能しています。しかし、パスの始点と終点にマーカーを追加したいのですが、どうすればいいですか?

パス、パスの始点と終点にマーカーを追加したいと思います。

ここに実用的なサンプルがあります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 に答える