将谷歌地图标记移动到自举轮播幻灯片上

Question

我试图在启动轮播幻灯片更改上移动标记。我已成功生成带有标记的地图，并成功绑定幻灯片以调用函数。因此，当用户滑过地址时，Google地图应显示该特定位置的标记。这里是我的尝试：

<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> 

我在这里myMap()这是updateMarker()然后试着打电话给updateMarker()幻灯片如下改变后声明一个函数：

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

但它看起来像updateMarker()唐” t知道地图和标记对象。它说：

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

任何帮助吗？我相信我在错误的地方宣布了这个功能。任何帮助请

Answer 1

你忘了通过map和参数updateMarker功能。

下面是一个修改示例，演示了如何更新标记的位置上旋转木马幻灯片变化

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>