我使用数据库中的自定义标记构建了一个Google Map，效果很好。可以找到工作版本here。
因为将来会有更多标记我尝试将标记聚类器添加到地图中，但它在Google Developer Console中给我一个错误：
未捕获的TypeError：marker.getPosition不是函数
可以找到引发错误的版本here。
以下是我的maptest_so.php的样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>KaiPai | Gutes Essen</title>
<!-- Bootstrap core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Styles -->
<link href="assets/map.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">
<img src="img/logo.png" width="85" height="25" alt="KaiPai">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Startseite
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="map.php">Karte</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">Über KaiPai</a>
</li>
<li class="nav-item">
<a class="nav-link" href="commitement.php">Ethik & Essen</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="admin/admin.php">Administration
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="map" id="map"></div>
<!-- Custom Marker Icons -->
<script type="text/javascript">
var iconBase = 'https://www.kaipai.de/img/customMapIcons/';
var icons = {
1: {
name: 'Backwaren',
icon: iconBase + 'bakery.png'
},
2: {
name: 'Getränke',
icon: iconBase + 'beverages.png'
},
3: {
name: 'Fisch',
icon: iconBase + 'fish.png'
},
4: {
name: 'Früchte / Obst',
icon: iconBase + 'fruit.png'
},
5: {
name: 'Fleisch',
icon: iconBase + 'meat.png'
},
6: {
name: 'Sonstiges',
icon: iconBase + 'other.png'
},
7: {
name: 'Restaurant',
icon: iconBase + 'restaurant.png'
},
8: {
name: 'Supermarkt',
icon: iconBase + 'supermarket.png'
}
};
// Google Map initialisieren
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(53.5508, 9.9928),
zoom: 11,
});
var infoWindow = new google.maps.InfoWindow;
// Marker aus XML Datei erstellen
downloadUrl('genxml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://www.kaipai.de/img/markerClustererImages/m'});
Array.prototype.forEach.call(markers, function(markerElem) {
var CustomerID = markerElem.getAttribute('CustomerID');
var CustomerGroupID = markerElem.getAttribute('CustomerGroupID');
var CustomerName = markerElem.getAttribute('CustomerName');
var CustomerCity = markerElem.getAttribute('CustomerCity');
var CustomerCountry = markerElem.getAttribute('CustomerCountry');
var CustomerStreetName = markerElem.getAttribute('CustomerStreetName');
var CustomerStreetNumber = markerElem.getAttribute('CustomerStreetNumber');
var CustomerPostalCode = markerElem.getAttribute('CustomerPostalCode');
var CustomerPhone = markerElem.getAttribute('CustomerPhone');
var CustomerFax = markerElem.getAttribute('CustomerFax');
var CustomerMail = markerElem.getAttribute('CustomerMail');
var CustomerWeb = markerElem.getAttribute('CustomerWeb');
var CustomerDescription = markerElem.getAttribute('CustomerDescription');
var CustomerGroupName = markerElem.getAttribute('CustomerGroupName');
var TypeName = markerElem.getAttribute('TypeName');
var TypeID = markerElem.getAttribute('TypeID');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('CustomerLat')),
parseFloat(markerElem.getAttribute('CustomerLng')));
// Inhalt des InfoWindow
var infowincontent = document.createElement('div');
var header = document.createElement('h5');
header.textContent = CustomerName
infowincontent.appendChild(header);
var street = document.createElement('text');
street.textContent = CustomerStreetName + ' '
infowincontent.appendChild(street);
var number = document.createElement('text');
number.textContent = CustomerStreetNumber
infowincontent.appendChild(number);
infowincontent.appendChild(document.createElement('br'));
var plz = document.createElement('text');
plz.textContent = CustomerPostalCode + ' '
infowincontent.appendChild(plz);
var city = document.createElement('text');
city.textContent = CustomerCity
infowincontent.appendChild(city);
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(document.createElement('br'));
var phone = document.createElement('text');
phone.textContent = 'Tel: ' + CustomerPhone
infowincontent.appendChild(phone);
infowincontent.appendChild(document.createElement('br'));
var fax = document.createElement('text');
fax.textContent = 'Fax: ' + CustomerFax
infowincontent.appendChild(fax);
infowincontent.appendChild(document.createElement('br'));
var mail = document.createElement('text');
mail.textContent = CustomerMail
infowincontent.appendChild(mail);
infowincontent.appendChild(document.createElement('br'));
var web = document.createElement('text');
web.textContent = CustomerWeb
infowincontent.appendChild(web);
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(document.createElement('br'));
var routeLink = document.createElement('a');
var routeLinkText = document.createTextNode("Route in Google Maps planen");
routeLink.appendChild(routeLinkText);
routeLink.title = 'Route in Google Maps planen';
routeLink.target = '_blank'
routeLink.href = 'https://maps.google.com/maps?daddr=' + CustomerStreetName + '+' + CustomerStreetNumber + '+' + CustomerPostalCode + '+' + CustomerCity
infowincontent.appendChild(routeLink);
var icon = icons[TypeID] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icons[TypeID].icon
});
// Marker Click Event erzeugen
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<!-- Google Maps JavaScript API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAUBsRd-k9I9BjQdiUmKqeQEHYBQIxUfV4&callback=initMap">
</script>
<!-- Google Maps Marker Clusterer -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<!-- Bootstrap core JavaScript -->
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>
错误发生在页面加载上，似乎发生在这里：
var markerCluster = new MarkerClusterer（地图，标记， {imagePath：'https://www.kaipai.de/img/markerClustererImages/m'
我已经从this Question尝试了已接受的解决方案，但它无效。我试图在同一个帖子中测试第一个答案，但我完全不理解。
任何人都可以帮我指出正确的方向吗？ 我是谷歌地图Javascript API和网页设计的新手，所以请不要介意我的问题是否有点不明确。
提前致谢和最诚挚的问候！
答案 0 :(得分：0)
您正在创建MarkerClusterer并使用从xml文件返回的内容填充它。它需要填充实际的if player_ship.lower() == 'transport'
对象
将您的if player_ship in {'Transport', 'TRANSPORT', 'transport'}
来电更改为google.maps.Marker，并将其置于通话中以创建新的MarkerClusterer实例，如下所示：
forEach答案 1 :(得分：0)
您报告了一个类似Uncaught TypeError的错误：marker.getPosition不是函数，实际上marker.getPosition在代码中的任何位置都看不到。在调试或尝试重现错误时，最好提供自包含的示例代码，以帮助您的开发人员重现问题。 Please read this.
您的InfoWindow构造函数缺少括号，因此请按以下方式添加它们：
var infoWindow = new google.maps.InfoWindow();
您正在MarkerClusterer中传递DOM元素（确切地说是节点），而实际上您必须传入Markers对象，而不是DOM元素。换句话说，您不能指望此代码在您的markerClusterer中起作用：
downloadUrl('genxml.php', function(data) {
var xml = data.responseXML;
var markers = xml.document.getElementsByTagName('marker');
您提供的代码没有任何带有标记名称标记的HTML元素：
var markers = xml.document.getElementsByTagName('marker');
HTML中的标记在哪里？
在脚本结束时启动Marker构造函数，然后调用（我认为）超出范围的方法;一旦您对代码结构，语法错误和逻辑错误进行排序，请查看控制台是否在标记中出现任何错误，并在必要时将变量移动到全局作用域或相同的词法作用域中，以便可以访问它。
不幸的是我无法完整地重现这个问题，因为我缺乏依赖关系和应用程序的其他部分更彻底......但是，上述内容应该足以让它工作。