异步记录谷歌地图脚本

我正在尝试异步加载我的谷歌地图 api 调用脚本，这样它就不会在我的 WordPress 网站上呈现阻塞。

忽略 PHP，我正在通过定制器加载自定义设置。

我可以通过向我的 api 调用脚本标签添加异步延迟来加载它，但问题是地图仅在我硬重载浏览器时加载，普通用户不会知道这样做。如何在不需要硬重新加载站点的情况下加载地图？

<script id="map-code" type="text/javascript" async defer>
function init() {
var styledMapType = new google.maps.StyledMapType([{"elementType":"geometry","stylers":[{"color":"#f5f5f5"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f5f5"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#c7e0ba"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#dadada"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#c9c9c9"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]}]  , {name: "Styled Map"});
var position = [<?php echo get_theme_mod('google_map_coordinates') ?>];
var latLng = new google.maps.LatLng(position[0], position[1]);
var mapOptions = {
zoom: 11, // initialize zoom level - the max value is 21
streetViewControl: false, // hide the yellow Street View pegman
scaleControl: true, // allow users to zoom the Google Map
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
fullscreenControl: false,
scaleControl: false,
center: latLng
};
var numberMarkerImg = {
url: '<?php echo get_theme_mod('map_marker_image')?> ',
size: new google.maps.Size(<?php echo get_theme_mod('map_marker_container_size') ?>),
scaledSize: new google.maps.Size(<?php echo get_theme_mod('map_marker_container_size') ?>),
labelOrigin: new google.maps.Point(<?php echo get_theme_mod('map_marker_label_position') ?>)
};

map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);
marker = new google.maps.Marker({
position: latLng,     
label: 'Label',
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
mapTypeControlOptions: {
mapTypeIds: ['styled_map']
},
title:"Your Name",
label: {
color: "<?php echo get_theme_mod('map_label_color') ?>",
text: "<?php echo get_theme_mod('google_label_name')?>",
fontWeight: "900",             
fontSize: "16px"
},
icon: numberMarkerImg
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
//google.maps.event.addDomListener(window, 'load', init);
</script>

我的调用脚本标记

<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=places&key=API_KEY" async defer></script>

我尝试将调用放在地图代码的上方和下方，但没有成功。我的意思是 JS 以异步方式成功加载，但如果不进行硬重载，则无法渲染。我想我需要知道我是否需要同时加载它们 asyn 或延迟，或者只是 api 调用，im 在我的智慧结束时。

只需做一个小的更改，它就会起作用。

从中删除
回调=初始化

<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=places&key=API_KEY" async defer></script>

并从身体标签中调用它，例如<body onLoad="init();">

相关内容

最新更新

热门标签：