谷歌地图外部链接向前和向后

我想做2个外部链接：前进和返回我的谷歌地图。我已经搜索了它，但有一个例子会很好：这是我的代码：

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

我只能找到每个标记带有链接的示例，但我需要一个前进和后退链接。

这里有一些问题。您需要为 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);
});

我还在您的 infoOpen 函数中添加了 2 行，这将使索引保持在边界gmarkers。还有你的按钮：

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

小提琴

相关内容

最新更新

热门标签：