Question

我正在尝试异步加载我的google maps 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或defer或者仅仅是api调用，我在我的机智结束时。

Answer 1

只做一个小改动＆amp;它有效。

从

中删除callback = init

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

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

以异步方式登录谷歌地图脚本

1 个答案: