我想使用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)。
答案 0 :(得分:3)
当我运行你的代码时,我在javascript控制台中收到了这个错误:
错误:google.maps.MarkerWithLabel不是构造函数
因为MarkerWithLabel不是Google Maps API v3的一部分。将构造函数更改为:
var marker = new MarkerWithLabel({
map: map,
...