Fatal编程技术网
  • javascript/
  • Javascript 使用AJAX可以避免谷歌地图收费，并且只在有人单击按钮时才显示地图

Javascript 使用AJAX可以避免谷歌地图收费，并且只在有人单击按钮时才显示地图

javascript ajax google-maps google-maps-api-3 maps

Javascript 使用AJAX可以避免谷歌地图收费，并且只在有人单击按钮时才显示地图,javascript,ajax,google-maps,google-maps-api-3,maps,Javascript,Ajax,Google Maps,Google Maps Api 3,Maps,自2018年7月16日起生效，谷歌地图API不再完全免费从2018年7月16日起，要继续使用谷歌地图平台API，您必须对每个项目启用计费。（） 我的问题是，在使用新的谷歌地图API和谷歌需要的相应密钥和账单信息一周后，我开始看到我的使用费非常高。这很好，因为这意味着我的网站流量很大，我不应该特别抱怨这一点。问题是，我的绝大多数访问者可能都没有一直看到/使用地图，而且他们加载一个有地图的页面后，我仍然会被收取费用 我的想法是在默认情况下不显示地图，并且有一个显示“showmap”的链接，这样我只向

自2018年7月16日起生效，谷歌地图API不再完全免费
从2018年7月16日起，要继续使用谷歌地图平台API，您必须对每个项目启用计费。
（）

我的问题是，在使用新的谷歌地图API和谷歌需要的相应密钥和账单信息一周后，我开始看到我的使用费非常高。这很好，因为这意味着我的网站流量很大，我不应该特别抱怨这一点。问题是，我的绝大多数访问者可能都没有一直看到/使用地图，而且他们加载一个有地图的页面后，我仍然会被收取费用

我的想法是在默认情况下不显示地图，并且有一个显示“showmap”的链接，这样我只向真正有兴趣查看地图的人显示地图。然后我想向GoogleMapsAPI发出一个AJAX请求。我知道并认识到这是一种规避支付的方式，但我认为这是一种公平的游戏，因为我只想在我的访问者真正看到/使用谷歌地图功能时收取使用费，而不是在他们在我的网站上加载页面时立即收取使用费。谷歌会允许我这么做，还是会被认为是作弊？请看下面的代码。我的想法是在访问者单击“显示地图”按钮时使用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>


var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
});
}
更新1：阅读，乔库拉的回答是

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

这是有道理的。考虑到尝试我在这个问题中提出的问题的技术含义，考虑到JavaScript作为DOM文本插入时不会执行，我怀疑它是否有效。问题是，我将使用AJAX生成
…
部分，作为DOM文本插入，但不会执行。如果我在页面加载后立即插入它，那么无论我是否通过显示代码的
部分来实际显示地图，我都会立即被收费。当人们甚至看不到地图，或者对看地图或与地图互动都不感兴趣时，这听起来是一种规避付款的有趣方式，公平地说，但我不认为我可以用AJAX做到这一点。

你可能会做的是使用一个提示地图的占位符图像，加载Javascript，但不调用map函数（在Google的示例中，通常通过
initMap
调用）

下面的例子过于夸张了，但可能给出了我的建议。我正在通过谷歌控制台监控地图的加载——仅仅加载页面并不会增加计数器，但一旦点击地图并正确调用地图，我发现配额计数器就会上升

也许这会有用

<!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>


按需加载地图
html，正文{
高度：100vh；
宽度：100%；
保证金：0；
填充：0；
}
身体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：白烟；
}
#地图{
高度：90vh；
宽度：90%；
保证金：自动；
边框：3倍实心rgba（0,0,0,1）；
}
.静态地图{
背景图片：url（/images/maps/staticmap scotland.jpg）；
背景位置：左上角；
背景尺寸：封面；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：3倍实心rgba（0,0,0,0.25）！重要；
}
/*使用伪元素类显示消息*/
.静态地图：之后{
内容：attr（数据信息）；
字体大小：3rem；
颜色：红色；
宽度：100%；
显示：块；
文本对齐：居中；
}
document.addEventListener（'DOMContentLoaded'，function（）{
让map=document.getElementById（'map'）；
const initMap=函数（）{
变量默认位置={
拉脱维亚：56.646577，
液化天然气：-2.888609
};
map=新的google.maps.map（map{
缩放：10，
中心：默认位置，
mapTypeId:“路线图”，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
让选项={
位置：默认位置，
地图：地图，
图标：'//maps.google.com/mapfiles/ms/icons/blue pushpin.png'，
标题：“默认位置”
}
marker=新的google.maps.marker（选项）；
}
/*如果需要使用地图的功能，请让用户知道如何单击地图*/
map.onmouseover=function（）{
this.dataset.info='单击要加载的地图'；
};
map.onmouseout=function（）{
this.dataset.info=''；
};
document.querySelector（'.staticmap'）。onclick=function（）{
如果（确认（'是否要加载正确的映射？'））{
/*完全调用地图*/
initMap（）；
/*删除呈现静态图像等的类*/
this.classList.remove（'staticmap'）；
}
}
}，假）；