google-maps-api-3 - 带标签的标记不出现

Question

我想使用markerwithlabel.js 包 ( http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/ ) 将标签附加到我的标记上。我将包链接放在文档标题中，并在 addMarker 函数中添加了标签属性。我不知道为什么标签没有出现，因为在添加标签属性之前一切正常。我错过了什么吗？

在标题中:

        <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js" type="text/javascript"></script>

我在这里创建标记:

//iterate through marker data and assign values to variables
            for (i = 0; i < markerData.length; i++) {
                var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
                var title = markerData[i][0];
                var category = markerData[i][3];
                var new_marker = addMarker(pos, title, category);
                arrMarkers.push(new_marker);
                new_marker.setVisible(false);
            }

            //create marker based on the variables
            function addMarker (pos, title, category) {
                var marker = new google.maps.MarkerWithLabel({
                    map: map,
                    position: pos,
                    icon: "mapIcons/marker_"+markerData[i][4]+".png",
                    category: category,
                    labelContent: "test",
                    labelAnchor: new google.maps.Point(22, 0),
                    labelClass: "labels", // the CSS class for the label
                    labelStyle: {opacity: 0.75},


                });  

                infoBubble = new InfoBubble({
                    maxWidth: 300,
                    borderRadius: 10,
                    borderWidth: 1,
                    borderColor: '#2c2c2c',
                    shadowStyle: 1
                });

                var infoWindow = new google.maps.InfoWindow; 
                var info = 'Functie: ' + '<b>' + markerData[i][0] + "</b>" + '<br>' + 'Eigenschappen: ' + '<b>' + markerData[i][6] + "</b>" ;  //html inside InfoWindow 
                //var video = "<div>" + '<iframe width="420" height="315" src="//www.youtube.com/embed/4gMH0V4L4A4">' + '</iframe>' + "</div>";  //html inside InfoWindow
                var video = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="250" height="188" src="http://www.youtube.com/embed/UmFjNiiVk9w?rel=0" frameborder="0"></iframe>';
                //var video = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="200" height="180" src="//www.youtube.com/embed/4gMH0V4L4A4?rel=0" frameborder="0"></iframe>'
                //var video = '<iframe width="420" height="315" src="//www.youtube.com/embed/S_9CSFeO9sM?rel=0" frameborder="0" allowfullscreen></iframe>'
                var media = "<b>" + 'Laatste foto, ontvangen op 15:33 9-7-2013' + "</b>" + '<img src="others/schiphol_marechaussee.jpg" alt="laatste foto">'  ;  //html inside InfoWindow 
                var contact = ' <form><textarea rows="10" cols="30">Typ hier je bericht</textarea>' + '<input type="reset" value="Verstuur"></form>';  //html inside InfoWindow 


                if (markerData[i][5] == 'info') {
                    bindInfoWindowInfo(marker, map, infoBubble, info);
                    infoBubble.addTab('Info', info);
                    infoBubble.addTab('Contact', contact);
                    infoBubble.addTab('Media', media);
                };
                if (markerData[i][5] == 'video') {
                    bindInfoWindowVideo(marker, map, infoBubble, video); 
                    infoBubble.addTab('Video', video);
                };


                return marker;
            }

单击复选框后，会出现标记(这就是其 setVisible 为 false 的原因)。

Answer 1

当我运行你的代码时，我在 javascript 控制台中收到此错误:

Error: google.maps.MarkerWithLabel is not a constructor

因为 MarkerWithLabel 不是 Google Maps API v3 的一部分。将构造函数更改为:

var marker = new MarkerWithLabel({
                map: map,
                ...

working example (at least the MarkerWithLabel is working)