0

マーカークラスターとさまざまなポイントを含むGoogleマップマップがあります。イベントリスナーで以下のようなポイントを生成すると、ページの読み込み時にポイントごとにオフになります。

function mappyfuntime() {
    var mapOptions = {
        center: new google.maps.LatLng(51.481581,-3.17909),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("bigmap"), mapOptions);
    <?php echo prepare_javascript(); ?>
    var markers = [];
    var marker = [];
    linkto = new Array();
    for(g=0; g<LocationsArray.length; g++) {
        var latlng = new google.maps.LatLng(LocationsArray[g][0], LocationsArray[g][1]);
        marker[g] = new google.maps.Marker({'position': latlng});
        markers.push(marker[g]);
        google.maps.event.addListener(marker[g], 'click', click_handler(PermalinksArray[g]));
    }
    var markerCluster = new MarkerClusterer(map, markers);
}

mappyfuntime();
function click_handler(link) {
    alert(link);
}

ただし、google.maps.event.addListener を次のように変更すると、アラートは未定義に戻ります。

google.maps.event.addListener(marker[g], 'click', function() {
    alert(PermalinksArray[g]);
});

PermalinksArray[g] を関数に渡すと、同じことが起こります。対応するポイントがマップ上でクリックされたときに、配列 (グローバルに定義されている) から情報を取得する方法はありますか?

4

2 に答える 2

0

2 つのマーカーを使用して Google マップを作成しました。マーカーをクリックすると、エリアの名前が情報ウィンドウに表示されます。マーカー内の情報は、cityList という名前のグローバルに定義された配列を介してロードされます。私のコードは以下にあります。

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var cityList = [
                ['Chicago', 41.850033, -87.6500523, 1],
                ['Illinois', 40.797177,-89.406738, 2]
            ],
            demoCenter = new google.maps.LatLng(41,-87),
            map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                var marker, i;
                var infowindow = new google.maps.InfoWindow();
                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
                        title: cityList[i][0]
                    });

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

            $(document).on("pageinit", "#basic-map", function() {
                initialize();
            });

            $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                addMarkers();
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
            </div>
        </div>      
    </body>
</html>

これが役立つことを願っています。

于 2012-08-28T17:04:39.437 に答える
0

Permalinks Array は php 挿入から来ていると思いますか? それでは、グローバルスコープではありません。そのphp-insertをJavaScriptスクリプトの先頭に配置してみてください。

// set globals
var map;
var markers = [];
var PermalinksArray = ['...'];
var LocationsArray = ['...'];

function mappyfuntime() {

    // init map
    var mapOptions = {
        center: new google.maps.LatLng(51.481581,-3.17909),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("bigmap"), mapOptions);

    // create markers        
    for(g=0; g<LocationsArray.length; g++) {

        // create new Position
        var latlng = new google.maps.LatLng(LocationsArray[g][0], LocationsArray[g][1]);
        // create new marker with position
        var marker = new google.maps.Marker({'position': latlng});
        // add event to marker
        google.maps.event.addListener(marker, 'click', function() {
            click_handler(marker, PermalinksArray[g]);
        });
        // push marker into markers array
        markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
}

function click_handler(marker, link) {
    alert(link);
}

mappyfuntime();
于 2012-08-28T15:13:29.100 に答える