如何在 Google 地图上的标记之间移动？

Question

有谁知道点击一些锚点后如何实现Marker之间的跳转？

这是我的代码：

<ul class="switching__list">
    <li><a href="" data-name="Black Sea">Black Sea</a></li>
    <li><a href="" data-name="Baltik Sea">Baltik Sea</a></li>
    <li><a href="" data-name="North Sea">North Sea</a></li>
    <li><a href="" data-name="Atlantic Ocean">Atlantic Ocean</a></li>
</ul>
<div id="map-canvas"></div>

和javascript

function initialize() {
    var mapOptionsWatertemp = {
        center: new google.maps.LatLng(43.533016, 34.557850),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    // Coordinates
    var blackSea = new google.maps.LatLng(43.533016, 34.557850);
    var balticSea = new google.maps.LatLng(57.415672, 19.927596);
    var northSea = new google.maps.LatLng(56.029392, 3.514022);
    var atlanticOcean = new google.maps.LatLng(35.391504, -10.178066);

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptionsWatertemp);

    marker = new google.maps.Marker( {position: blackSea, map: map} );
    marker2 = new google.maps.Marker( {position: balticSea, map: map} );
    marker3 = new google.maps.Marker( {position: northSea, map: map} );
    marker4 = new google.maps.Marker( {position: atlanticOcean, map: map} );
}

initialize();

这是我的Fiddle

Answer 1

一个选项：使您的地图变量成为全局变量（因此它在 HTML "click" 事件中可用）：

var map;
function initialize() {
 var mapOptionsWatertemp = {
  center: new google.maps.LatLng(43.533016, 34.557850),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
    // Coordinates
 var blackSea = new google.maps.LatLng(43.533016, 34.557850);
 var balticSea = new google.maps.LatLng(57.415672, 19.927596);
 var northSea = new google.maps.LatLng(56.029392, 3.514022);
 var atlanticOcean = new google.maps.LatLng(35.391504, -10.178066);

 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptionsWatertemp);
    
    marker = new google.maps.Marker( {position: blackSea, map: map} );
    marker2 = new google.maps.Marker( {position: balticSea, map: map} );
    marker3 = new google.maps.Marker( {position: northSea, map: map} );
    marker4 = new google.maps.Marker( {position: atlanticOcean, map: map} );
}

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

#map-canvas 
{ 
height: 400px; 
width: 500px;
}

<script src="http://maps.googleapis.com/maps/api/js"></script>
<ul class="switching__list">
    <li><a href="javascript:map.setCenter(marker.getPosition());" data-name="Black Sea">Black Sea</a></li>
    <li><a href="javascript:map.setCenter(marker2.getPosition());" data-name="Baltik Sea">Baltik Sea</a></li>
    <li><a href="javascript:map.setCenter(marker3.getPosition());" data-name="North Sea">North Sea</a></li>
    <li><a href="javascript:map.setCenter(marker4.getPosition());" data-name="Atlantic Ocean">Atlantic Ocean</a></li>
</ul>
<div id="map-canvas"></div>

proof of concept fiddle

如何在 Google 地图上的标记之间移动？

How to move between markers on Google Map?

javascript

google-maps

google-maps-api-3

google-maps-markers