-1

正常に表示されているマーカーの配列があります。私が抱えている問題は、配列に保持されているコンテンツを使用するたびに InfoBox を表示することです。この配列は store_pins と呼ばれ、要素 4 と 5 は InfoBox に渡される値を保持します (要素 4 には画像のファイル名、5 には画像のキャプションが含まれます)。InfoBox コードは

マーカーがクリックされたときに InfoBox を呼び出す必要があり、 // INFO BOX CODE GOES HERE というコメントがあるコードの下部に移動する必要があります。

完全な私のコードは次のとおりです。

    var map;
    var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";


    google.maps.event.addDomListener(window, 'load', initialize);
    
    function initialize() {
        var map_center  = new google.maps.LatLng(55.144178,-2.254122);
        var store_pins  = new Array();
        var pin_marker  = new Array();
        var pin_info    = new Array();
        var pin_infoop  = new Array();
        
        store_pins = [
            ['Bellingham Co-Op', 55.144178, -2.254122,'pin','bellinghamcoop.jpg','Staff at Bellingham Co-Op'],
            ['Leicester Tigers - Kingston Park', 55.018754, -1.672230,'rugby','kingparktigers.jpg','Stu with the Leicester Tigers Rugby Team'],
            ['The Hawick PSA Team', 55.421825, -2.797123,'rugby','hawickpsa.jpg','The Hawick PSA Team']
        ];

    var myOptions = {
        zoom: 3,
        minZoom: 3,
        center: map_center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
        map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
    
        // Main Loop
        
        
        for(i=0;i<store_pins.length;i++)
        {
        var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
        var pinIcon = {
            url: 'icons/shirtpin.png',
            //The size image file.
            size: new google.maps.Size(50, 55),
            //The point on the image to measure the anchor from. 0, 0 is the top left.
            origin: new google.maps.Point(0, 0),
            //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
            anchor: new google.maps.Point(25, 20)
        };
        var pinShape = {
            coord: [0,0,50,55],
            type: 'rect'
        };

        pin_marker[i] = new google.maps.Marker(
        {
                position:       pos,
                map:            map,
                title:          store_pins[i][0],
                icon:           pinIcon,
                shape:          pinShape,
                zIndex:         107
           } 
        );
            
        pin_infoop[i] = {
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-241, 0),
                zIndex: null,
                boxStyle: { 
                background: "url('infobox/pop_up_box_top_arrow.png') no-repeat",
                opacity: 1,
                width: "430px"
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "icons/button_close.png",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false,
                content:   store_pins[i][5]
        };

        pin_info[i] = new InfoBox(pin_infoop[i]);

            
            
        google.maps.event.addListener(pin_marker[i], 'click', function() {
            map.panTo(this.position);
            map.setZoom(10);
            pin_info[i].open(map, this);
        });
} 
};

4

1 に答える 1

0

コードで JavaScript エラーが発生します。

Uncaught TypeError: Cannot read property 'open' of undefined

この行で：

pin_info[i].open(map, this);

i=3 で、使用可能な pin_info の最大インデックスは 2 です。

あなたの問題は、情報ウィンドウ/ボックスをループで定義するという一般的な問題です。匿名関数クロージャでこの質問を解決:

これを変える：

    google.maps.event.addListener(pin_marker[i], 'click', function() {
        map.panTo(this.position);
        map.setZoom(10);
        pin_info[i].open(map, this);
    });

に：

    google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
    return function() {
        map.panTo(this.position);
        map.setZoom(10);
        pin_info[i].open(map, this);
    }
  })(pin_marker[i], i));

概念実証フィドル(コードがそのままでは機能しないため、何が起こっているかを確認できるように、インフォボックスのアイコンとプロパティの一部を変更する必要がありました)

于 2015-03-15T10:02:42.090 に答える