在引导轮播幻灯片上移动谷歌地图标记

Question

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

<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() 不知道地图和标记对象。它说：

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

有什么帮助吗？我确定我在错误的地方声明了该功能。请帮忙

Answer 1

您忘记将 map 和 marker 参数传递给 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>