javascript - 点击链接时谷歌地图平移到中心

Question

我正在尝试使用 Google map 实现以下目标。

目标: 当用户点击链接时，Google map 将平移到该位置的中心。

当前: 用户点击标记，Google map 将平移到该位置的中心。

我想我已经快到了，只是缺少某些功能来让它工作。

这是我当前的js文件:

<script type="text/javascript">
jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
        disableDefaultUI: true
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);

    // Multiple Markers
    var markers = [
        ['The Great Pyramid of Giza', 29.979123, 31.134266 ],
        ['Hanging Gardens of Babylon', 32.543609, 44.424070],
        ['Statue of Zeus at Olympia', 38.099822, 21.583331],
        ['Temple of Artemis at Ephesus', 37.949929, 27.364802],
        ['Mausoleum at Halicarnassus', 37.038038, 27.424385],
        ['Colossus of Rhodes', 36.450964, 28.226221],
        ['Lighthouse of Alexandria', 31.213883, 29.885638]
    ];

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                map.panTo(marker.getPosition());
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(6);
        google.maps.event.removeListener(boundsListener);
    });
}
</script>

这是我当前的 HTML:

<ul class="nav nav-pills">
    <li class="contact-link active"><a data-toggle="pill" data-wonder="The Great Pyramid of Giza" href="#pyramid"><strong>The Great Pyramid of Giza</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Hanging Gardens of Babylon" href="#garden"><strong>Hanging Gardens of Babylon</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Statue of Zeus at Olympia" href="#statue"><strong>Statue of Zeus at Olympia</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Temple of Artemis at Ephesus" href="#temple"><strong>Temple of Artemis at Ephesus</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Mausoleum at Halicarnassus" href="#mausoleum"><strong>Mausoleum at Halicarnassus</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Colossus of Rhodes" href="#collosus"><strong>Colossus of Rhodes</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Lighthouse of Alexandria" href="#lighthouse"><strong>Lighthouse of Alexandria</strong></a></li>
</ul>
<div class="tab-content">
    <div id="pyramid" class="tab-pane fade in active">
        <p>The Great Pyramid of Giza<br>info:...</p>
    </div>
    <div id="garden" class="tab-pane fade">
        <p>Hanging Gardens of Babylon<br>info:...</p>
    </div>
    <div id="statue" class="tab-pane fade">
        <p>Statue of Zeus at Olympia<br>info:...</p>
    </div>
    <div id="temple" class="tab-pane fade">
        <p>Temple of Artemis at Ephesus<br>info:...</p>
    </div>
    <div id="mausoleum" class="tab-pane fade">
        <p>Mausoleum at Halicarnassus<br>info:...</p>
    </div>
    <div id="collosus" class="tab-pane fade">
        <p>Colossus of Rhodes<br>info:...</p>
    </div>
    <div id="lighthouse" class="tab-pane fade">
        <p>Lighthouse of Alexandria<br>info:...</p>
    </div>
</div>
<div id="googleMap" class="mapping" style="height:656px;"></div>

Answer 1

您可以将循环更改为

var wonderlinks = $('[data-wonder]'); // added this line
// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });
    // added the following block
    wonderlinks.filter(function(){
        return $(this).data('wonder') === markers[i][0];
    }).on('click', (function(marker){
        return function(){
            map.panTo(marker.getPosition());
      }
    })(marker));

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            map.panTo(marker.getPosition());
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}

更新了演示:https://jsfiddle.net/5cqc9u5y/1/