谷歌地图方向不适用于addEventListener

时间:2016-06-03 10:38:57

标签: javascript google-maps google-maps-api-3

我按照此链接上的教程:https://developers.google.com/maps/documentation/javascript/examples/directions-complex来创建地图方向。当我在我的地图中将它成本化时,它不起作用。我认为这是因为addEventListener无法正常工作,因为我的错误代码。有人可以帮帮我吗?

关于plunker的

演示:https://plnkr.co/edit/FzYTtgv2WriPVRJJMt6S?p=preview

这是我的方向代码:

//direction config starts here 

          var directionsService = new google.maps.DirectionsService;
    // Create a renderer for directions and bind it to the map.
        var directionsDisplay = new google.maps.DirectionsRenderer({map: map});

       // Instantiate an info window to hold step text.
     var stepDisplay = new google.maps.InfoWindow;
      // Display the route between the initial start and end selections.
    calculateAndDisplayRoute(
        directionsDisplay, directionsService, markerArray, stepDisplay, map);
    // Listen to change events from the start and end lists.
    var onChangeHandler = function() {
      calculateAndDisplayRoute(
          directionsDisplay, directionsService, markerArray, stepDisplay, map);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);

    function calculateAndDisplayRoute(directionsDisplay, directionsService,
      markerArray, stepDisplay, map) {
    // First, remove any existing markers from the map.
    for (var i = 0; i < markerArray.length; i++) {
      markerArray[i].setMap(null);
    }}

      // Retrieve the start and end locations and create a DirectionsRequest using
    // WALKING directions.
    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      travelMode: google.maps.TravelMode.WALKING
    }, function(response, status) {
      // Route the directions and pass the response to a function to create
      // markers for each step.
      if (status === google.maps.DirectionsStatus.OK) {
        document.getElementById('warnings-panel').innerHTML =
            '<b>' + response.routes[0].warnings + '</b>';
        directionsDisplay.setDirections(response);
        showSteps(response, markerArray, stepDisplay, map);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  function showSteps(directionResult, markerArray, stepDisplay, map) {
    // For each step, place a marker, and add the text to the marker's infowindow.
    // Also attach the marker to an array so we can keep track of it and remove it
    // when calculating new routes.
    var myRoute = directionResult.routes[0].legs[0];
    for (var i = 0; i < myRoute.steps.length; i++) {
      var markerss = markerArray[i] = markerArray[i] || new google.maps.Marker;
      markerss.setMap(map);
      markerss.setPosition(myRoute.steps[i].start_location);
      attachInstructionText(
          stepDisplay, markerss, myRoute.steps[i].instructions, map);
    }
  }

  function attachInstructionText(stepDisplay, markerss, text, map) {
    google.maps.event.addListener(markerss, 'click', function() {
      // Open an info window when the marker is clicked on, containing the text
      // of the step.
      stepDisplay.setContent(text);
      stepDisplay.open(map, markerss);
    });

   }
 //ends of directions 

提前谢谢 -

1 个答案:

答案 0 :(得分:0)

calculateAndDisplayRoute()目前只删除标记,但不绘制路径。

修正脚本:

        var map;
var markerArray = [];
        var markers = [];
        var feature = [];
        var i, marker,markerss;
        var content = '<html> <style type="text/css">.enjoy-css {-webkit-box-sizing: content-box-moz-box-sizing: content-box;box-sizing: content-box; padding: 19px; border: none; -webkit-border-radius: 3px; border-radius: 3px;font: normal 16px/1 "Comic Sans MS", cursive, sans-serif;color: black;-o-text-overflow: ellipsis;text-overflow: ellipsis;background: -webkit-linear-gradient(0deg, rgba(252,234,187,1) 0, rgba(252,205,77,1) 18%, rgba(248,181,0,1) 82%, rgba(251,223,147,1) 100%);background: -moz-linear-gradient(90deg, rgba(252,234,187,1) 0, rgba(252,205,77,1) 18%, rgba(248,181,0,1) 82%, rgba(251,223,147,1) 100%);background: linear-gradient(90deg, rgba(252,234,187,1) 0, rgba(252,205,77,1) 18%, rgba(248,181,0,1) 82%, rgba(251,223,147,1) 100%);background-position: 50% 50%;-webkit-background-origin: padding-box;background-origin: padding-box;-webkit-background-clip: border-box;background-clip: border-box;-webkit-background-size: auto auto;background-size: auto auto;-webkit-box-shadow: 0 0 0 3px rgba(100,103,119,1) inset; box-shadow: 0 0 0 3px rgba(100,103,119,1) inset; -webkit-transform: rotateY(-20.626480624709636deg)   ; transform: rotateY(-20.626480624709636deg)  ;}</style> <body><br><div class="enjoy-css">';

        function initialize() {

            //initialize peta
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 16,
                center: new google.maps.LatLng(-8.704956, 115.22750),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    position: google.maps.ControlPosition.TOP_CENTER
                }
            });

            //setting traffic layer option. 
            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);

            //define infowindow
            var infowindow = new google.maps.InfoWindow({
                content: ''
            });


//direction config starts here 

              var directionsService = new google.maps.DirectionsService;
 // Create a renderer for directions and bind it to the map.
        var directionsDisplay = new google.maps.DirectionsRenderer({map: map});

        // Instantiate an info window to hold step text.
        var stepDisplay = new google.maps.InfoWindow;
 // Display the route between the initial start and end selections.
        calculateAndDisplayRoute(
            directionsDisplay, directionsService, markerArray, stepDisplay, map);
        // Listen to change events from the start and end lists.

        var onChangeHandler = function() { 
          calculateAndDisplayRoute(
              directionsDisplay, directionsService, markerArray, stepDisplay, map);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);

 function calculateAndDisplayRoute(directionsDisplay, directionsService,
          markerArray, stepDisplay, map) {
        // First, remove any existing markers from the map.
        for (var i = 0; i < markerArray.length; i++) {
          markerArray[i].setMap(null);
        }

          // Retrieve the start and end locations and create a DirectionsRequest using
        // WALKING directions.
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: google.maps.TravelMode.WALKING
        }, function(response, status) {
          // Route the directions and pass the response to a function to create
          // markers for each step.
          if (status === google.maps.DirectionsStatus.OK) {
            document.getElementById('warnings-panel').innerHTML =
                '<b>' + response.routes[0].warnings + '</b>';
            directionsDisplay.setDirections(response);
            showSteps(response, markerArray, stepDisplay, map);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      function showSteps(directionResult, markerArray, stepDisplay, map) {
        // For each step, place a marker, and add the text to the marker's infowindow.
        // Also attach the marker to an array so we can keep track of it and remove it
        // when calculating new routes.
        var myRoute = directionResult.routes[0].legs[0];
        for (var i = 0; i < myRoute.steps.length; i++) {
          var markerss = markerArray[i] = markerArray[i] || new google.maps.Marker;
          markerss.setMap(map);
          markerss.setPosition(myRoute.steps[i].start_location);
          attachInstructionText(
              stepDisplay, markerss, myRoute.steps[i].instructions, map);
        }
      }

      function attachInstructionText(stepDisplay, markerss, text, map) {
        google.maps.event.addListener(markerss, 'click', function() {
          // Open an info window when the marker is clicked on, containing the text
          // of the step.
          stepDisplay.setContent(text);
          stepDisplay.open(map, markerss);
        });

}}
//ends of directions 



            //define searchbox function start here
            var input = document.getElementById('locationTextField');


            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() {
                searchBox.setBounds(map.getBounds());
            });

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener('places_changed', function() {
                var places = searchBox.getPlaces();

                if (places.length == 0) {
                    return;
                }



                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                    var icon = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };

                    // Create a marker for each place.
                    markers.push(new google.maps.Marker({
                        map: map,
                        icon: icon,
                        title: place.name,
                        position: place.geometry.location
                    }));

                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                });
                map.fitBounds(bounds);
            });

            var autocomplete = new google.maps.places.Autocomplete(input);

            //search box function end here

            //define marker icon
            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var icons = {
                parking: {
                    name: 'Parking',
                    icon: iconBase + 'parking_lot_maps.png'
                },
                library: {
                    name: 'Library',
                    icon: iconBase + 'library_maps.png'
                },
                info: {
                    name: 'Info',
                    icon: iconBase + 'info-i_maps.png'
                }
            };

            /*
            function addMarker(feature, map) {
                marker = new google.maps.Marker({
                    position: feature.position,
                    icon: icons[feature.type].icon,
                    map: map
                });

                //    marker.category = feature[i]['category'];
                marker.setVisible(true);

                markers.push(marker);
            }*/


            // define marker position
            var features = [{
                position: new google.maps.LatLng(-8.702709, 115.224461),
                type: 'info',
                title: 'Pusat Informasi Kota',
                category: 1

            }, {
                position: new google.maps.LatLng(-8.704432, 115.230249),
                type: 'parking',
                title: 'Tempat Parkir Avaliable',
                category: 2
            }, {
                position: new google.maps.LatLng(-8.704442, 115.231239),
                type: 'library',
                title: 'perpustakaan kota',
                category: 3
            }, {
                position: new google.maps.LatLng(-8.702909, 115.230149),
                type: 'parking',
                title: 'ini parkir',
                category: 2
            }, {
                position: new google.maps.LatLng(-8.602709, 115.230241),
                type: 'library',
                title: 'ini perpus',
                category: 3
            }, {
                position: new google.maps.LatLng(-8.402709, 115.230211),
                type: 'info',
                title: 'ini info',
                category: 1
            }, {
                position: new google.maps.LatLng(-8.402704, 115.230114),
                type: 'parking',
                title: 'ini parkir',
                category: 2
            }, {
                position: new google.maps.LatLng(-8.401704, 115.130114),
                type: 'library',
                title: 'ini library',
                category: 3
            }, {
                position: new google.maps.LatLng(-8.401708, 115.130117),
                type: 'info',
                title: 'ini info',
                category: 1
            }, {
                position: new google.maps.LatLng(-8.401608, 115.130107),
                type: 'library',
                title: 'ini library 1',
                category: 3
            }];


            //Adding marker into map
            for (var i = 0, feature; feature = features[i]; i++) {
                marker = new google.maps.Marker({
                    position: feature.position,
                      animation: google.maps.Animation.DROP,
                    icon: icons[feature.type].icon,
                    map: map
                });
                marker.category = features[i]['category'];
                marker.setVisible(false);

                markers.push(marker);
                google.maps.event.addListener(marker, 'click', (function(marker, feature) {
                    return function() {
                        infowindow.setContent(content + " " + feature['title'] + "</div><br></body</html>");
                        infowindow.setOptions({
                            maxWidth: 200
                        });
                        infowindow.open(map, marker);
                    }
                })(marker, feature));


            }



            //define and show floating information on right map
            var legend = document.getElementById('legend');
            for (var key in icons) {
                var type = icons[key];
                var name = type.name;
                var icon = type.icon;
                var div = document.createElement('div');
                div.innerHTML = '<img src="' + icon + '"> ' + name;
                legend.appendChild(div);
            }

            map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);




            //function for hide and show POI info
            window.showPOI1 = function(t) {
                if (t.is(':checked')) {
                    //alert('checked');
                    for (i = 0; i < markers.length; i++) {
                        if (markers[i].category === 1) {
                            markers[i].setVisible(true);
 markers[i].setAnimation(google.maps.Animation.BOUNCE);

                        }

                    }

                } else {
                    infowindow.close();
                    for (i = 0; i < markers.length; i++) {
                        if (markers[i].category === 1) {
                            markers[i].setVisible(false);
                        }

                    }
                }

            }



            //function for hide and show POI parking
            window.showPOI2 = function(t) {
                if (t.is(':checked')) {
                    //alert('checked');
                    for (i = 0; i < markers.length; i++) {
                        if (markers[i].category === 2) {
                            markers[i].setVisible(true);
                        markers[i].setAnimation(google.maps.Animation.DROP);
                        }

                    }

                } else {
                    infowindow.close();
                    for (i = 0; i < markers.length; i++) {
                        if (markers[i].category === 2) {
                            markers[i].setVisible(false);
                        }

                    }
                }

            }


            //function for hide and show POI Library
            window.showPOI3 = function(t) {
                if (t.is(':checked')) {

                    for (i = 0; i < markers.length; i++) {
                        if (markers[i].category === 3) {
                            markers[i].setVisible(true);
                             markers[i].setAnimation(google.maps.Animation.DROP);
                        }

                    }

                } else {
                    infowindow.close();
                    for (i = 0; i < markers.length; i++) {
                        if (markers[i].category === 3) {
                            markers[i].setVisible(false);
                        }

                    }
                }

            }

onChangeHandler();
        }

https://plnkr.co/edit/JfCH1T8khOCewoNSJYBE?p=preview