Question

我继承了下面的一些代码，一切正常。我的问题是如何在此地图中添加自定义图标？我以前添加了一个，但我不知道应该把代码放在哪里？

// 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)
    });

Answer 1

请参阅documentation on custom icons，其中包含一个示例。

至于放置代码的位置，它需要在地理编码器的回调函数中，“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。

如何将自定义图标添加到Google地图v3

1 个答案: