javascript - JS 异步加载 Google Maps API 时出错
问题描述
正如这个问题中所解释的,我已添加&callback=initialize
到加载 Google Maps API 的脚本中:
<script src="https://maps.googleapis.com/maps/api/js?key=XXXX&callback=initialize&region=it&libraries=places" async defer></script>
地图加载,但方向不再,我收到以下错误:
Uncaught ReferenceError: google is not defined
at map.html:15
Uncaught (in promise) TypeError: Cannot read property 'push' of undefined
at initialize (map.html:60)
at js?key=XXXX&callback=initialize®ion=it&libraries=places:130
我究竟做错了什么?
这是功能(我已更改 GPS 坐标并从标签/地址中删除信息以保护隐私):
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var mkArray=[];
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myLatlng = new google.maps.LatLng(41.389835,12.413704);
var mapOptions = {
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatlng,
styles: [
{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var input = document.getElementById('start');
var options = {
types: ['geocode'],
componentRestrictions: {country: 'it'},
rankBy: google.maps.places.RankBy.DISTANCE
};
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.76, 12.33),
new google.maps.LatLng(42.00, 12.64)
);
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.setBounds(bounds);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'XXXXX'
});
mkArray.push(marker);
}
function calcRoute(callback) {
var start = document.getElementById('start').value;
var end = "Address, Rome";
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.TRANSIT
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
// If a callback was passed, run it
if(typeof callback === "function") {
callback();
}
}
});
for (var i = 0, j = mkArray.length; i < j; i++)
mkArray[i].setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);
解决方案
您正在尝试google
在加载对象之前使用它:
var directionsService = new google.maps.DirectionsService()
你需要等待你的回调initialize
被执行以使用google
对象,所以我最好的建议是做这样的事情(就像你已经做过的那样directionsDisplay
):
var directionService;
function initialize() {
directionsService = new google.maps.DirectionsService();
// other code here
}
在你的最后一行你想做什么?
google.maps.event.addDomListener(window, 'load', initialize);
你在这里犯了2个错误:
google
在您的回调被调用之前仍在尝试使用- 您正在尝试为 GMaps API 回调和窗口
load
事件注册相同的函数。由于第一点,这不起作用,但即使这样做,你最终也会执行initialize
两次,我认为这不是你想要的。
推荐阅读
- javascript - Vue Storefront核心模块如何扩展
- events - 操作系统上下文中的中断驱动与事件驱动
- python - PyQtGraph 实时绘制多行数据
- android - Flutter中如何实现本地通知?
- excel - 基于时间(军事时间)和日期的颜色条件格式
- bash - 所以我改变了我的脚本,找到两个数字的乘积,在用户最大值以下,现在发生了这种情况
- reactjs - 旧版上下文 API 使用 react-router-dom 反应
- typescript - 如何让 typescript 对象属性接受数组(对象)或对象的联合?
- python - 如何在python中的对象数组上应用过滤器
- javascript - 使用 jQuery 显示/隐藏 div