Google Maps API错误: initMap不是函数
Google Maps API错误: initMap不是函数
提问于 2017-08-04 19:34:53
我的谷歌地图标记出了点问题。它们仍然有效，但我在dev控制台中得到了以下输出：
maps.php:43 Uncaught SyntaxError: Unexpected token ,下面是我的代码中的这一行：
center: {lat: <?php echo $e[0]; ?>, lng: <?php echo $e[1]; ?>}下一条错误消息是：
message
:
"initMap is not a function"
name
:
"InvalidValueError"
stack
:
"Error↵ at new mc (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:47:499)↵ at Object._.nc (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:48:96)↵ at $g (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:98:420)↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:138:53↵ at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:21:5)↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:137:20↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:138:68我没有得到我所犯的错误，以下是我的JS代码：
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmbNphkRdEmJqjC1rQwirD6NL-24Kbdb0&callback=initMap">
</script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: <?php echo $e[0]; ?>, lng: <?php echo $e[1]; ?>}
});
// Create an array of alphabetical characters used to label the markers.
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function (location, i) {
var marker = new google.maps.Marker({
position: location,
});
google.maps.event.addListener(marker, 'click', function (evt) {
infoWin.setContent("<div style='color: black;'><p style='font-size:1.5em;'>"+ location.date +"</p><h2>" + location.headline + "</h2><h3>" + location.subheadline + "</h3><p style='font-size:1.2em;'><strong>Start:</strong> "+ location.start +" Uhr</br><strong>Ende:</strong> "+ location.end +" Uhr</p><hr><p>" + location.text + "</p><hr><p style='font-size: 1.2em;'><strong>Adresse:</strong></br>" + location.street + " " + location.streetnr + ", " + location.plz + " " + location.city + "\n\
</p><a style='font-size: 1.2em;' target='blank_' href='http://www.google.com/maps/place/" + location.lat + "," + location.lng + "'>Routenführung</a></div>");
infoWin.open(map, marker);
})
return marker;
});
console.log(markers);
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = <?php echo json_encode($r); ?>
console.log(locations);
</script>问题是我有56个标记，但只有27个标记出现。我认为可能是数据有问题。可以吗？我搜索了一下，但没有找到像我这样的笑脸问题。
回答 4
Stack Overflow用户
发布于 2017-08-04 20:01:52
在从Google Maps API执行脚本之前，您是否尝试定义函数initMap ？
只需将此行移动到文件的末尾。
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmbNphkRdEmJqjC1rQwirD6NL-24Kbdb0&callback=initMap">
</script>Stack Overflow用户
发布于 2017-08-04 19:50:17
解析时出现数据错误。在某些数据上设置了非Lat或Lng ...
Stack Overflow用户
发布于 2017-08-04 22:17:46
您需要首先定义函数，就像我在下面的示例代码中所做的那样。
function GoogleDistanceService() {
var map;
var directionDisplay;
var distanceOption;
var directionsService = new google.maps.DirectionsService();
return {
"initializeLoad": function (mapContext) {
directionDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(35.220033, -50.5500100);
var mapOptions = {
zoom: 6,
center: newyork
};
map = new google.maps.Map(mapContext, mapOptions);
directionDisplay.setMap(map);
////////////////// here put code to hide your map div
},
"callBack": function (response, status) {
var distance = "";
if (status != google.maps.DistanceMatrixStatus.OK) {
distanceOption.errorCallBack(null);
}
else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
/////////// here show your map div
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
distance = results[j].distance.text.replace(" km", "") * 0.62137;
}
}
}
distanceOption.updatedCallBack({ "start": distanceOption.start, "end": distanceOption.end, "distance": distance });
},
"MapLoad": function (option) {
distanceOption = option;
this.initializeLoad(option.mapContext);
var service = new google.maps.DistanceMatrixService();
var request = { origin: option.start, destination: option.end, travelMode: google.maps.TravelMode.DRIVING };
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionDisplay.setDirections(response);
}
});
service.getDistanceMatrix({
origins: [option.start],
destinations: [option.end],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, this.callBack);
}
};
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45505790
复制相关文章
相似问题
腾讯云开发者
