Question

我想在Google地图中为特定标记添加不同的自定义标记。我创建了一个名为icon的图标，其中有一个名为test.png的png，我只想将它添加到我已经使用过的元素标记之一。最后，我将有一个标记与正常的谷歌地图外观和另一个与我的自定义标记。

感谢您的帮助。

 <script>
    function infoOpen(i)
    {

        google.maps.event.trigger(gmarkers[i], 'click');
    }
    var gmarkers = [];
    var markers = [];
    markers = [


        ['1', '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h4 id="firstHeading" class="firstHeading">test</h4>'+
  '<div id="bodyContent">'+
  '<p><ul><li>test</li>'+                   
  '</div>'+
  '</div>', 46.332414, 11.447935],

       ['2', '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h4 id="firstHeading" class="firstHeading">test</h4>'+
  '<div id="bodyContent">'+
  '<p><ul><li>test</li>'+                   
  '</div>'+
  '</div>', 42.332414, 13.447935],    

  ];


    $(document).ready(function () {
        var myOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };

        var icon = new google.maps.MarkerImage('test.png',
            new google.maps.Size(96, 59),
            new google.maps.Point(0,0),
            new google.maps.Point(32, 59)
            );

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        var bounds = new google.maps.LatLngBounds();

        for (i = 0; i < markers.length; i++) {
            var pos = new google.maps.LatLng(markers[i][2], markers[i][3]);
            var content = markers[i][1];
            bounds.extend(pos);
            marker = new google.maps.Marker({
                position: pos,
                map: map
            });
            gmarkers.push(marker);
            google.maps.event.addListener(marker, 'click', (function(marker, content) {
                return function() {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                }

            })(marker, content));
        }


        map.fitBounds(bounds);
    });
</script>

Answer 1

我相信您需要做的就是将图标添加到您创建的标记之一：

gmarkers[0].setIcon('test.png');

如果你想在循环内完成，请执行以下操作：

    ['1', '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h4 id="firstHeading" class="firstHeading">test</h4>'+
  '<div id="bodyContent">'+
  '<p><ul><li>test</li>'+                   
  '</div>'+
  '</div>', 46.332414, 11.447935, 'test.png'],

       ['2', '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h4 id="firstHeading" class="firstHeading">test</h4>'+
  '<div id="bodyContent">'+
  '<p><ul><li>test</li>'+                   
  '</div>'+
  '</div>', 42.332414, 13.447935, ''],    

  ];

然后

    for (i = 0; i < markers.length; i++) {
        var pos = new google.maps.LatLng(markers[i][2], markers[i][3]);
        var content = markers[i][1];
        bounds.extend(pos);
        marker = new google.maps.Marker({
            position: pos,
            map: map,
        });
        if (markers[i][4] != '') {
            marker.setIcon(markers[i][4]);
        }
        gmarkers.push(marker);
        google.maps.event.addListener(marker, 'click', (function(marker, content) {
            return function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }

        })(marker, content));
    }

在谷歌地图中为不同的标记添加不同的自定义图标

1 个答案: