谷歌地圖外部鏈接向前和向後

我想做2個外部鏈接：轉發並返回到我的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); 
});

我還添加了2號線在你infoOpen功能，將保持該指數gmarkers的範圍。和你的按鈕：

<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

谷歌地圖外部鏈接向前和向後

回答

相關問題