Google 외부 링크 앞으로 및 뒤로

앞으로 2 개의 외부 링크를 만들고 싶습니다. 앞으로 및 뒤로 Google지도로 이동합니다. 내가 후 검색 한하지만 예와 좋은 것 : 를 여기 내 코드입니다 : 만 마커 당 링크 예를 찾을 수 있습니다Google 외부 링크 앞으로 및 뒤로

<!DOCTYPE html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1 
                  /jquery.min.js"></script>  
<script src="loadgpx.js" type="text/javascript"></script> 
<script type="text/javascript">     
     function infoOpen(retning) 
     {    
     r = r + retning;    
      google.maps.event.trigger(gmarkers[r], 'click'); 
     } 
     var gmarkers = []; 
     var markers = []; 
     var r, retning; 
     markers = [ 
      ['0', 'Marker 1', 13.988719, 100.617909], 
      ['1', 'Marker 2', 13.662811, 100.43758], 
      ['2', 'Marker 3', 13.744961, 100.535073], 
      ['3','Marker 4', 13.801981, 100.613864], 
      ['4', 'Marker 5', 13.767507, 100.644024]]; 

     $(document).ready(function() { 
      var myOptions = { 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: false 
      };    
      var map = new google.maps.Map(document.getElementById("map"), myOptions); 
      var image = new google.maps.MarkerImage('img/marker.png', 
      new google.maps.Size(65, 32), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(18, 42)); 
      var infowindow = new google.maps.InfoWindow();    
      var marker, i;     
      var bounds = new google.maps.LatLngBounds(); 

      for (i = 0; i < markers.length; i++) { 
       var pos = new google.maps.LatLng(markers[i][2], markers[i][3]); 
       var content = markers[i][1]; 
       bounds.extend(pos); 
       marker = new google.maps.Marker({ 
        position: pos, 
        map: map 
       }); 
       gmarkers.push(marker); 
       google.maps.event.addListener(marker, 'click', (function(marker, content) { 
        return function() { 
         infowindow.setContent(content); 
         infowindow.open(map, marker); 
        } 
       })(marker, content)); 
      } 
      map.fitBounds(bounds); 
     }); 
    </script> 
    <style> 
       body { 
      text-align: center 
     } 
     #map { 
      width:640px; 

      height: 480px; 
      border:6px solid #6f5f5e; 
      margin:20px auto 30px auto; 
     } 
</style> 
</head> 
<body> 
<div> 
<a href="javascript:void(0);" onclick="infoOpen(1);">back</a> 
<a href="javascript:void (0);" onclick="infoOpen('+1');">forward</a> 
<div id="map">&nbsp;</div> 
</div> 
</body> 
</html>

은,하지만 난이 앞으로 및 뒤로 링크를해야합니다.

출처

2014-02-28 pknudsen

당신이 앞뒤로 버튼으로 무슨 뜻 이죠. 그들이 무엇을해야합니까? – putvande

여기 몇 가지 문제가 있습니다. r의 기본값을 설정하고 링크의 따옴표를 제거해야합니다 (infoOpen('+1');). 그것은 단지 뒤쪽에 대해 infoOpen(1); 및 infoOpen(-1);해야한다 :

function infoOpen(retning) { 
    r = r + retning; 
    // Don't get out of bounds 
    if (r >= gmarkers.length) r = 0; 
    if (r < 0) r = gmarkers.length - 1; 
    google.maps.event.trigger(gmarkers[r], 'click'); 
} 

var gmarkers = []; 
var r = 0, retning; 
var markers = [ 
    ['0', 'Marker 1', 13.988719, 100.617909], 
    ['1', 'Marker 2', 13.662811, 100.43758], 
    ['2', 'Marker 3', 13.744961, 100.535073], 
    ['3', 'Marker 4', 13.801981, 100.613864], 
    ['4', 'Marker 5', 13.767507, 100.644024] 
]; 

$(document).ready(function() { 
    var myOptions = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
    }; 
    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
    var image = new google.maps.MarkerImage('img/marker.png', 
    new google.maps.Size(65, 32), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(18, 42)); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 
    var bounds = new google.maps.LatLngBounds(); 

    for (i = 0; i < markers.length; i++) { 
     var pos = new google.maps.LatLng(markers[i][2], markers[i][3]); 
     var content = markers[i][1]; 
     bounds.extend(pos); 
     marker = new google.maps.Marker({ 
      position: pos, 
      map: map 
     }); 
     gmarkers.push(marker); 
     google.maps.event.addListener(marker, 'click', (function (marker, content) { 
      return function() { 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
      } 
     })(marker, content)); 
    } 
    map.fitBounds(bounds); 
});

는 또한 경계에 gmarkers에 인덱스를 유지하는 것이다 infoOpen 기능 2 개 라인을 추가했다. 그리고 당신의 버튼 :

<a href="javascript:void(0);" onclick="infoOpen(-1);">back</a> 
<a href="javascript:void(0);" onclick="infoOpen(1);">forward</a>

Fiddle

출처

2014-02-28 16:45:54 putvande

Google 외부 링크 앞으로 및 뒤로

답변

관련 문제