2

JS フィドル: http://jsfiddle.net/megatimes/NVDLf/7/

配列から複数のマーカーを作成するマップがあります。マップの下にはいくつかのリンクがあり、クリックすると、マップがそれぞれのマーカーに移動し、情報ウィンドウが開きます。

マーカーを作成するループの一部としてリンク自体を生成したくない場合、どうすればこれを行うことができますか?

マップの下のリンクはそれぞれ場所配列の最後の項目を開くため、これはスコープの問題であると確信していますが、それを回避する方法がわかりません。

ありがとう

var locations = [
    [
    "Location 1",
     "215 West Girard Avenue 19123",
    "39.9695601",
    "-75.1395161"
    ],
    [
    "Location 2",
    "5360 Old York Road 19141",
    "40.034038",
    "-75.145223"
    ],
    [
    "Location 3",
    "1350 W Girard Avenue 19123",
    "39.9713524",
    "-75.1590360"
    ]
    ];


var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(39.9995601, -75.1395161),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}


$(function() {
    $('#locations h3 a').each(function() {
        $(this).on('click', function() {
            google.maps.event.trigger(marker, 'click');    
        })    
      });    
}); 

<div id="map" style="width: 500px; height: 400px;"></div>
<div id="locations">
    <h3><a href="#">Location 1</a></h3>
    <p>Arbitrary content about 1</p>

    <h3><a href="#">Location 2</a></h3>
    <p>Arbitrary content about 2</p>

    <h3><a href="#">Location 3</a></h3>
    <p>Arbitrary content about 3</p>
</div>
4

3 に答える 3

5

次のようなことができます。

http://jsfiddle.net/6vjwd/2/embedded/result/

createMarker 関数を使用して、情報ウィンドウをマーカーに関連付けます。

function createMarker(latlng, html)
{
var marker = new google.maps.Marker({
    position: latlng,
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
});
return marker;
}

また、HTML クリック リスナーから参照できるようにするためのグローバル配列。

外部リンクは、場所の順序を知っていることに依存します。または、「名前」で検索したい場合は、名前をインデックスとして「連想」配列を使用できます。

名前によるマーカーのインデックス作成:

http://jsfiddle.net/6nqj8/1/embedded/result/

于 2012-10-24T16:56:56.000 に答える
3

マーカーの生成中に jQuery を使用してリンクを生成します。jQuery の呼び出しを使用してマーカー オブジェクトをリンク オブジェクトに格納し、.data()それらのリンクに汎用クリック ハンドラーを追加して、マップをマーカーの位置に設定することができます。

このようなもの：

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));

    $('#locations').append($('<a>').append('Location Name').click(function()
    {
        // $(this).data('marker')
    }).data('marker', marker));
}
于 2012-10-24T16:21:10.550 に答える
1

わかりました、これは私にとってはうまくいきます。というグローバル変数配列に各マーカーを追加していますmarkers。次に、リンクがクリックされるたびに、jquery .index() 関数を使用してそれらのリンクの配列内のどのリンクであるかを確認し、対応するマーカー (リンク 1 = マーカー 1 など) で「クリック」をトリガーします。

ここで再利用した createMarker 関数についても geocodezip に感謝します。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 500px; height: 400px; }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var marker, map;
var markers = [];

function initialise() {
var i;
    var locations = [
        [
        "Location 1",
         "215 West Girard Avenue 19123",
        "39.9695601",
        "-75.1395161"
        ],
        [
        "Location 2",
        "5360 Old York Road 19141",
        "40.034038",
        "-75.145223"
        ],
        [
        "Location 3",
        "1350 W Girard Avenue 19123",
        "39.9713524",
        "-75.1590360"
        ]
        ];


    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: new google.maps.LatLng(39.9995601, -75.1395161),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    infowindow = new google.maps.InfoWindow();

    for (i = 0; i < locations.length; i++) {
        markers.push(createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0]));
    }
}

function createMarker(latlng, html)
{
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(html);
            infowindow.open(map, marker);
    });

    return marker;
}

$(function() {
    $('#locations h3 a').each(function() {
        $(this).on('click', function() {
            // find out which link in the array was clicked (1st, 2nd etc)
            var intLinkClicked = $('#locations h3 a').index($(this));
            google.maps.event.trigger(markers[intLinkClicked], 'click');    
        });
    });    
}); 

google.maps.event.addDomListener(window, 'load', initialise);
</script>
</head>
<body>
    <div id="locations">
        <h3><a href="#">Location 1</a></h3>
        <p>Arbitrary content about 1</p>

        <h3><a href="#">Location 2</a></h3>
        <p>Arbitrary content about 2</p>

        <h3><a href="#">Location 3</a></h3>
        <p>Arbitrary content about 3</p>
    </div>
    <div id="map"></div>
</body>
</html>
于 2012-10-25T08:32:09.973 に答える