javascript - 页面加载后谷歌地图无法读取未定义的属性“扩展”
问题描述
我试图通过在页面加载两秒后加载我的谷歌地图来提高页面速度。这样做时,我不断收到“无法读取未定义的属性'扩展'”。我知道正在进行一些异步加载,但我不确定如何以正确的顺序获取它以在页面完成后 2 秒加载此地图。任何帮助是极大的赞赏。
页面代码:
<div id="mapCont"></div>
<script defer type='text/javascript' src='/js/maps.js'></script>
地图.js
$(window).bind("load", function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=key', function()
{
setTimeout(function(){
function doMap(callback) {
$("#mapCont").html('<div id="mapInfoManual" class="searchMap mb5"></div>');
callback();
}
doMap(function() {
initialize();
var map = null;
var markers = [];
var openedInfoWindow ="";
var bounds = new google.maps.LatLngBounds();
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(64.85599578876611, -147.83363628361917),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("mapInfoManual"),
mapOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
if (this.getZoom() > 20) // Change max/min zoom here
this.setZoom(18);
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
addMarker();
}
function addMarker() {
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markersArray.length; i++) {
CodeAddress(markersArray[i]);
}
}
// Address To Marker
function CodeAddress(markerEntry) {
var mytitle = (markersArray[i]['title']);
var myaddress = (markersArray[i]['address']);
var linkid = (markersArray[i]['linkid']);
var linkurl = (markersArray[i]['linkurl']);
var image = { url: '/images/MapPin.png', };
var lat = markerEntry['lat'];
var long = markerEntry['long'];
// var myLatLng = {lat: markerEntry['lat'], lng: markerEntry['long']};
var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(long));
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
bounds.extend(marker.getPosition());
var infoWindowContent = "<div class='cityMapInfoPop'><span style='font-weight:700;'>"+ mytitle +"</span><br /><br />" + myaddress + "<br /><br /><a href='/center/" + linkurl + "/'>More Details</a></div>";
openInfoWindow(marker, infoWindowContent);
markers.push(marker);
map.fitBounds(bounds);
}
//Info Window
function openInfoWindow(marker, infoWindowContent) {
var infowindow = new google.maps.InfoWindow({
content: '<div class="cityMapInfoPop">' + infoWindowContent + '</div>'
});
google.maps.event.addListener(marker, 'click', function() {
if (openedInfoWindow != "") {
openedInfoWindow.close();
}
infowindow.open(map, marker);
openedInfoWindow = infowindow;
});
}
});
}, 2000);
});
});
解决方案
初始https://maps.googleapis.com/maps/api/js?key=key
加载未由您的实现捕获的其他脚本。包https://www.npmjs.com/package/@googlemaps/js-api-loader启用以下模式,并且可能是您想要的:
import { Loader } from '@googlemaps/js-api-loader';
const loader = new Loader({
apiKey: "",
version: "weekly",
libraries: ["places"]
});
loader
.load()
.then(() => {
doMap();
initialize();
})
.catch(e => {
// do something
});
如果您想要 JQuery 和现有模式,则替代方案(使用回调):
window.callback = () => {
doMap();
initialize();
};
$(window).bind("load", function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=key&callback=callback', () => {}); // do nothing here
也相关:https ://developers.google.com/maps/documentation/javascript/examples/programmatic-load-button
推荐阅读
- java - REST Endpoint 总是在 POSTMAN 中下载图像两次
- java - 如何在没有 isFinite() 和 isOrdered() 方法的情况下安全地使用 Java Streams?
- c++ - 如果继承不是公开的而不是出错,为什么 enable_shared_from_this 会崩溃
- android - 设置 DatePickerDialog 最小值和最大值
- python - 无法提取和合并共享公共列的两个数据集
- android - 如何重置片段内的参数
- sql - 滞后函数跳过以前有空的记录
- flutter - 给定 ChangeNotifier 中的状态更改,更改 TabView 中的选定选项卡
- swiftui - 如何隐藏 SwiftUI 列表分隔符
- common-lisp - Lisp %var 命名约定