Question

在访问者设置了原始地址后，我正在使用谷歌路线在地图上显示路线但是在使用这个有效的代码之后：

direction.setDirections(response)

我无法用：

刷新我的地图

google.maps.event.trigger(map, "resize");

jQuery(document).ready(function($){
    
    var calculate;
    var direction;
    var panel;
    var map = null;
    var center;
    
    panel    = document.getElementById('panel');
  
  $('.bandeau').hide();
  
  function new_map( $el ) {

        var $markers = $el.find('.marker');
      
		var maOptions = {
			zoom		: 7,
			center		: new google.maps.LatLng(0, 0),
			scaleControl: false,
			scrollwheel: false,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}; 
  

        // création de la carte	        	
        map = new google.maps.Map( $el[0], maOptions);

            
        // ajout de la référence du marqueur
        map.markers = [];

        // création du marqueur
        $markers.each(function(){
            add_marker( $(this), map );
        });

        // centrer la carte
        center_map( map );


        // renvoyer la carte
        return map;

    }

    /*
     *  Ajout d'un marqueur
     */

    function add_marker( $marker, map ) {

        var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

        // creation d'un marqueur
        var marker = new google.maps.Marker({
            position	: latlng,
            map			: map
		});
        
    
        // ajout au tableau
        map.markers.push( marker );

    }

    /*
     *  Centrer la carte
     */

    function center_map( map ) {

        var bounds = new google.maps.LatLngBounds();

        // Boucler sur tous les marqueurs
        $.each( map.markers, function( i, marker ){

            var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

            bounds.extend( latlng );

        });

        // Si un seul marqueur
        if( map.markers.length == 1 )
        {
            // le centrer sur la carte
            map.setCenter( bounds.getCenter() );
            
            map.setZoom( 14 );
         }
			else
        {
            map.fitBounds( bounds );
        }

    }

    /*
    *  affichage carte
    */
 
    $(document).ready(function(){

        $('.ms-map-ctc').each(function(){
            
            // Création de la carte
            map = new_map( $(this) );
            google.maps.event.addDomListener(map, 'idle', function() {
                center = map.getCenter();
            });

			direction = new google.maps.DirectionsRenderer({
				map   : map,
				panel : panel // Dom element pour afficher les instructions d'itinéraire
			});  
        });
           
    });

    /*
     * Itinéraire
     */
    $( "#direction" ).on('submit', function(e) {
        e.preventDefault();
        origin      = document.getElementById('ms-origin').value; // Le point de départ
        destination = 'Paris France'; // Le point d'arrivée
        if(origin && destination){
            var request = {
                origin      : origin,
                destination : destination,
                travelMode  : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
            }
            var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinéraire
            directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
                if(status == google.maps.DirectionsStatus.OK){
                    center = map.getCenter();
                    // On redimensionne la carte pour afficher l'itinéraire à côté
                    $('.bandeau').show( 200, function() {
                      $('#ms-map-ctc').addClass('resized-map');
                    });
                    direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center);
                }
            });
        }
    });

    /*
     * Places
     */
    
    var lenItin = $('#ms-origin').length; 
    if (lenItin != 0) {
        var autocomplete;
        autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('ms-origin')),
            { types: ['geocode'] }
        );
    }
});

.bandeau{
  width: 100%;
  height: 40px;
  background: #000;
}
#ms-map-ctc{
    position: relative;
    width: 100%;
    height: 50vh;  
}
#ms-map-ctc.resized-map{
    width: 70%;
    height: 90vh;
}
#panel{
  position: absolute;
  top: 0; right: 0;
  width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=false" type="text/javascript"></script>
<div class="bandeau"></div>
<div class="gm-wrap-ctc">
    <div id="ms-map-ctc" class="ms-map-ctc">
        <div class="marker" data-lat="48.854546" data-lng="2.349958"></div>
    </div>
</div>
<form action="" method="get" name="direction" id="direction">
    <input type="text" name="origin" id="ms-origin">
    <input id="ms-bt-calc" type="submit" value="Calculer votre itinéraire / Calculate your route">
</form>
<div id="panel"></div>

如果你设置“图卢兹”并验证，你会发现我们需要另一个验证来缩放和刷新地图。黑色标题是正常的，是的我替换元素以在旁边有路由描述。

在我的网站上我有灰色区域，但我不能在这里重复，但我认为问题是一样的。

当然，一旦我们使用它，它就会起作用。

Answer 1

一位优秀的法国发展者，Matthieu Rebillard找到答案：

我在地图上有一个css过渡。 Css过渡和javascript刷新无法一起工作。我删除了css转换，现在一切正常：）

提交后无法刷新谷歌地图：需要2进入

1 个答案: