0
私は訪問者が出発地アドレスを設定した後に地図上に経路を表示するためにGoogleのルートを使用しています。
しかし、働き、このコードを使用した後：あなたはたとえば、 "トゥールーズ" を設定した場合送信後にGoogleマップを更新できません：必要2入力してください
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');
\t \t var maOptions = {
\t \t \t zoom \t \t : 7,
\t \t \t center \t \t : new google.maps.LatLng(0, 0),
\t \t \t scaleControl: false,
\t \t \t scrollwheel: false,
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP
\t \t };
// création de la carte \t \t
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 \t : latlng,
map \t \t \t : map
\t \t });
// 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);
}
\t \t \t 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();
});
\t \t \t direction = new google.maps.DirectionsRenderer({
\t \t \t \t map : map,
\t \t \t \t panel : panel // Dom element pour afficher les instructions d'itinéraire
\t \t \t });
});
});
/*
* 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>：
direction.setDirections(response)
私はと私のマップを更新することはできません検証して、マップをズームして更新するための別の検証が必要であることがわかります。黒いヘッダーは普通です。はい、要素を置き換えて、側面にルートの説明があるようにします。
私のウェブサイトには灰色のゾーンがありますが、ここでそれを繰り返すことはできませんが、問題は同じだと思います。
もちろん、一度使用すると、後で動作します。
私は、地図上のCSSトランジションを持っていた：