Verschieben Sie Google Map Marker auf Bootstrap Karussell Folie

Question

Ich versuche, Marker auf Bootstrap Karussell Diawechsel zu bewegen. Ich habe erfolgreich eine Karte mit Markierung erstellt und bin erfolgreich beim Binden der Folie, um eine Funktion aufzurufen. Wenn Benutzer über die Adressen gleiten, sollte Google Map den Marker für diesen bestimmten Ort anzeigen. Hier ist, was ich versucht:

<script type="text/javascript" > 
    google.maps.event.addDomListener(window, 'load', myMap); 
     function myMap() { 
     var mapProp = { 
      center:new google.maps.LatLng(-27.4698,153.0251), 
      zoom:11, 
      styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100}, 
      {visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100}, 
      {visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"} 
      ]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}] 
     }; 
     var turbot = new google.maps.LatLng(-27.456730,153.029497); 
     var marker = new google.maps.Marker({ 
      position:turbot, 
      animation:google.maps.Animation.BOUNCE, 
      icon: 'images/marker.png' 
     }); 




     var map = new google.maps.Map(document.getElementById("map"),mapProp); 
     marker.setMap(map); 

     } 
     function updateMarker(map, marker) { 

     marker.setPosition(new google.maps.LatLng(-33.8688, 151.2093)); 
     map.panTo(new google.maps.LatLng(-33.8688, 151.2093)); 

     } 

    </script> 

Hier i eine Funktion nach myMap() bin erklärt, das ist updateMarker() dann versucht updateMarker() auf Diatransport zu nennen wie folgt:

jQuery('#myCarousel').bind('slide.bs.carousel', function (e) { 
       updateMarker(); 
      }); 

Aber es sieht so aus, dass updateMarker() don‘ t Karten- und Markerobjekte kennen. Es sagt:

***Uncaught TypeError: Cannot read property 'setPosition' of undefined 

Irgendwelche Hilfe? Ich bin mir sicher, dass ich diese Funktion an einem falschen Ort deklariere. keine Hilfe bitte

Answer 1

Sie haben vergessen, map und Argumente zu updateMarker Funktion zu übergeben.

Hier ist ein modifiziertes Beispiel, das wie Positionsaktualisierungsmarker auf Karussell Diatransport

google.maps.event.addDomListener(window, 'load', initMap); 
 

 

 
function initMap() { 
 

 
    var locations = [ 
 
     { "lat": 40.7055646, "lng": -74.1184291 }, 
 
     { "lat": 37.7576948, "lng": -122.4727052 } 
 
    ]; 
 

 

 
    var mapProps = { 
 
     zoom: 4 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map"), mapProps); 
 

 
    var marker = new google.maps.Marker({ 
 
     animation: google.maps.Animation.BOUNCE 
 
    }); 
 
    marker.setMap(map); 
 
    updateMarker(map,marker,locations[0]); 
 

 

 

 

 
    $('#myCarousel').bind('slide.bs.carousel', function (e) { 
 
     var slideIdx = $(e.relatedTarget).index(); 
 
     updateMarker(map,marker, locations[slideIdx]); 
 
    }); 
 
} 
 

 

 

 
function updateMarker(map, marker, pos) { 
 
    marker.setPosition(new google.maps.LatLng(pos.lat, pos.lng)); 
 
    map.panTo(marker.getPosition()); 
 
}

.item { 
 
    height: 90px; 
 
} 
 

 
.carousel { 
 
    height: 60px; 
 
} 
 

 
#map { 
 
    height: 240px; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
 
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 

 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <div class="container"> 
 
       <div class="carousel-caption"> 
 
        <h1>New York</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="container"> 
 
       <div class="carousel-caption"> 
 
        <h1>San Francisco</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- Carousel controls --> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
 

 
</div> 
 
<div id="map"></div>