2

外部リンクから Google マップの情報ウィンドウをアクティブにする方法はありますか? html と js コードは以下のとおりです。

マーカーの情報ウィンドウをアクティブにするための簡単な外部リンクが必要です。

どんな助けでも感謝します

サジャ:)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Map</title>
<style>
#map{
    width:640px;
    height: 480px;
    border:6px solid #6f5f5e;
    margin:20px auto 30px auto;
}


</style>
</head>

<body>


    <div class='container'>

  <div id="map">&nbsp;</div>

</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

<script>
var markers = [
    ['Marker 1', 13.988719,100.617909],
    ['Marker 2.', 13.662811,100.43758],
    ['Marker 3', 13.744961,100.535073],
    ['Marker 4', 13.801981,100.613864],
    ['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][1], markers[i][2]);
        bounds.extend(pos);
        marker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: image
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);
});
</script>
</body>

4

2 に答える 2

4

あなたが使用することができます、

function infoOpen(i)
{
    google.maps.event.trigger(markers[i],'click');
}

onclick要素のこの関数を使用します

例えば。

<a href="javascript:void(0);" onclick="infoOpen('1');">open it</a>

ここに完全なコードを掲載しています

<html>
    <head>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script>
            function infoOpen(i)
            {

                google.maps.event.trigger(gmarkers[i], 'click');
            }
            var gmarkers = [];
            var markers = [];
            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('0');">mark 1</a> <a href="javascript:void(0);" onclick="infoOpen('1');">mark 2</a> <a href="javascript:void(0);" onclick="infoOpen('2');">mark 3</a> <a href="javascript:void(0);" onclick="infoOpen('3');">mark 4</a> <a href="javascript:void(0);" onclick="infoOpen('4');">mark 5</a>

            <div id="map">&nbsp;</div>
        </div>
    </body>
</html>

私が追加しましたgmarkers.push(marker)

于 2013-09-30T09:07:04.630 に答える
0

はい、うまくいきます！http://jsfiddle.net/tinsajja/nXkXA/43/

OK、地図上に多くのマーカーがあるとしましょう。作成者を管理するにはどうすればよいですか?入れようとしましたが、インフォボックスがアクティブになりません。

私のコーディングスキルはカットアンドペーストであるため、検索してこれを入手しますhttp://jsfiddle.net/tinsajja/ezSUF/67/

コード上

$('#listdiv').append('<p><a href="javascript:show(' + i + ')" id="link' + i + '">' + locations[i][0] + '</a></p>');

追加してみます

<select><option><a href="javascript:show(' + i + ')"...

しかし、結果は5つの選択ボックスを生成しました。作り方を教えてください。

ありがとう、サジャ

于 2013-10-01T14:17:34.450 に答える