Question

有人知道如何在点击一些锚之后在标记之间实现跳转吗？

这是我的代码：

<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＆＃34中可用;点击＆＃34;事件）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

proof of concept fiddle

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

1 个答案: