0

以下のいくつかのコードを継承しましたが、すべて正常に動作します。私の質問は、このマップにカスタム アイコンを追加するにはどうすればよいですか? 以前に追加したことがありますが、コードをどこに配置すればよいかわかりません。

// initialize map
    var unitedKingdom = new google.maps.LatLng(55.378051, -3.435973);
    var options = {
        center: unitedKingdom,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 6
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    var infowindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();

    // fetch and iterate over the winners
    var current = 0;
    $.getJSON('JSON_FILE.txt', function (winners) {
        var popup = setInterval(function () {
            (function (winner) {
                var newCenter;
                var location = winner.name.split(', '); // winner.location seems a bit unreliable (sometimes null)
                geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        newCenter = results[0].geometry.location;
                        map.panTo(newCenter);
                        var contentStr = '<div class="infowindow">' + 
                                         '<p><strong>' + winner.name + '</strong> just won ' +
                                         '<strong>' + winner.displayAmount + '</strong> on ' + 
                                         '<strong>' + winner.game + '!</strong></p>' + 
                                         '</div>';
                        infowindow.setPosition(newCenter);
                        infowindow.setContent(contentStr);
                        infowindow.open(map);
                    }
                });
            })(winners[current]);
            // increment the current index, or reset it if we're on the last item
            current = (current < (winners.length-1)) ? (current+1) : 0;
        }, 3000)
    });
4

1 に答える 1

1

カスタム アイコンのドキュメントを参照してください。例が含まれています。

コードを配置する場所については、ジオコーダーのコールバック関数にある必要があります。「newCenter」は、おそらくマーカーを配置する位置です。

あなたのコードで：

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    newCenter = results[0].geometry.location;
                    map.panTo(newCenter);
                    var contentStr = '<div class="infowindow">' + 
                                     '<p><strong>' + winner.name + '</strong> just won ' +
                                     '<strong>' + winner.displayAmount + '</strong> on ' + 
                                     '<strong>' + winner.game + '!</strong></p>' + 
                                     '</div>';
                    infowindow.setPosition(newCenter);
                    infowindow.setContent(contentStr);
                    infowindow.open(map);
                }
            });

次のようにカスタム マーカーを追加します。

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    newCenter = results[0].geometry.location;
                    map.panTo(newCenter);
                    var marker = new google.maps.marker({
                       map: map,
                       position: newCenter,
                       icon: customIcon,
                       shadow: customIconShadow,
                       shape: customIconShape
                    });

                    var contentStr = '<div class="infowindow">' + 
                                     '<p><strong>' + winner.name + '</strong> just won ' +
                                     '<strong>' + winner.displayAmount + '</strong> on ' + 
                                     '<strong>' + winner.game + '!</strong></p>' + 
                                     '</div>';
                    infowindow.setPosition(newCenter);
                    infowindow.setContent(contentStr);
                    infowindow.open(map);
                }
            });

カスタム アイコンの必要に応じて、customIcon、customIconShadow、および customIconShape を定義します。

于 2012-08-14T03:10:57.103 に答える