代码之家  ›  专栏  ›  技术社区  ›  Jaime Montoya

使用AJAX可以避免Google地图的收费,并且只在有人点击按钮[复制]时才显示地图

  •  -1
  • Jaime Montoya  · 技术社区  · 6 年前

    自2018年7月16日起,谷歌地图API不再完全免费。 As of July 16, 2018, to continue to use the Google Maps Platform APIs, you must enable billing on each of your projects. ( https://developers.google.com/maps/documentation/javascript/usage-and-billing ).

    我的问题是,在使用新的googlemapsapi以及Google所需的相应密钥和账单信息一周后,我已经开始看到我的使用费相当疯狂。这是好的,因为这意味着我有一个重要的流量,我的网站,我不应该抱怨具体。问题是,可能我的绝大多数访问者甚至没有看到/使用地图的所有时间,我仍然是收费,只要他们加载一个网页上有一个地图。

    我的想法是在默认情况下不显示地图,并且有一个链接说“showmap”,这样我就只向真正有兴趣看到地图的人显示地图。然后我想向googlemapsapi发出AJAX请求。我知道并认识到这是一种规避支付的方式,但我认为这是公平的游戏,因为我只想在我的访问者真正看到/使用谷歌地图功能时收取使用费,而不是在他们加载我网站上的页面时立即收取使用费。谷歌会允许我这么做,还是会被认为是作弊?请看下面的代码 https://developers.google.com/maps/documentation/javascript/tutorial . 我的想法是在访问者单击“Show map”按钮时使用AJAX请求调用这段代码,以降低费用:

    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    

    更新1 :正在读取 Executing <script> inside <div> retrieved by AJAX

    作为DOM文本插入的JavaScript将不会执行。

    这是有道理的。考虑到尝试我在这个问题中提出的问题的技术含义,考虑到JavaScript作为DOM文本插入时不会执行,我怀疑它是否有效。问题是我将生成 <script>...</script> 使用AJAX的部分,作为DOM文本插入,不会执行。如果我在页面加载时就插入了它,那么无论我是否通过显示 <div id="map"></div>

    1 回复  |  直到 6 年前
        1
  •  0
  •   Professor Abronsius    6 年前

    您可以使用一个占位符图像来提示一个映射,加载Javascript,但不调用映射函数(通常通过 initMap 以谷歌为例)

    下面的例子过于夸张,但给出了一个想法,我的建议也许。我通过Google控制台监控地图的加载——仅仅加载页面并不会增加计数器,但是一旦点击地图并正确调用地图,我发现配额计数器就会上升。

    <!DOCTYPE html>
    <html lang='en'>
      <head>
        <meta charset='utf-8' />
        <title>Load a map on demand</title>
        <style>
            html, body {
                height:100vh;
                width:100%;
                margin: 0;
                padding: 0;
            }
            body{
                display:flex;
                align-items:center;
                justify-content:center;
                background:whitesmoke;
            }
            #map {
                height:90vh;
                width:90%;
                margin:auto;
                border:3px solid rgba(0,0,0,1);
            }
            .staticmap{
                background-image:url(/images/maps/static-map-scotland.jpg);
                background-position:top left;
                background-size:cover;
                display:flex;
                align-items:center;
                justify-content:center;
                border:3px solid rgba(0,0,0,0.25)!important;
            }
            /* use a pseudo element class to display a message */
            .staticmap:after{
                content:attr(data-info);
                font-size:3rem;
                color:red;
                width:100%;
                display:block;
                text-align:center;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
    
                let map=document.getElementById('map');
    
                const initMap=function() {
                    var default_location = {
                        lat:56.646577,
                        lng:-2.888609
                    };
                    map = new google.maps.Map( map, {
                        zoom: 10, 
                        center: default_location,
                        mapTypeId:'roadmap',
                        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
                    });
                    let options={
                        position:default_location,
                        map:map,
                        icon:'//maps.google.com/mapfiles/ms/icons/blue-pushpin.png',
                        title:'Default location'
                    }
    
                    marker = new google.maps.Marker( options );
                }
    
    
                /* let the user know to click the map if they need to use it's features */
                map.onmouseover=function(){ 
                    this.dataset.info='Click on the map to load';
                };
                map.onmouseout=function(){
                    this.dataset.info='';
                };
    
                document.querySelector('.staticmap').onclick=function(){
                    if( confirm('Would you like to load the proper map?') ){
    
                        /* invoke the map fully */
                        initMap();
    
                        /* remove class that presented static image etc */
                        this.classList.remove('staticmap');
                    }
                }
            },false);
        </script>
    
    
    
    
    
    
        <!--
            Rather than have the map initialisation run as a callback ( via the querystring parameter `callback=initMap` )
            or inline as a pageload function ( ie: `onload=initMap` etc ) do nothing at this stage.
        -->
        <script async defer src="//maps.googleapis.com/maps/api/js?key=APIKEY"></script>
    
    
      </head>
      <body>
        <div id='map' class='staticmap' data-info=''></div>
      </body>
    </html>
    

    Example 1: Page loads to display static image that suggests a map is available Clicking the map to invoke the actual map The actual map is now loaded... Google Console