javascript - 谷歌地图 - 如何为函数 initMap 添加参数？

Question

我正在使用 google maps api，我需要在每次重新加载页面时保持最后的中心和缩放级别。

我在 PHP 变量中有这个参数，如何更改 initMap 函数并将这些参数传递给它？

问题是我们是这样调用函数的:

<script src="https://maps.googleapis.com/maps/api/js?key=*******&callback=initMap" async defer></script>

Answer 1

您不能将参数传递给回调(至少不能通过加载 map API 的方式传递)

一个可能的解决方法:将参数存储为脚本标签的属性，然后您就可以在回调中访问它们:

<?php
  //your parameters, defined in PHP
  $goo=array('zoom'=>14,'center'=>array('lat'=>52.549,'lng'=>13.425));
?>
<div id="map_canvas"></div>
<script>
function initMap(){

  var opts = {
                      zoom:   0,
                      center: new google.maps.LatLng(0,0),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                   },
      script= document
         .querySelector('script[src^="https://maps.googleapis.com/maps/api/js"][data-goo]'),
      custom;

      if(script){
        custom=JSON.parse(script.getAttribute('data-goo'));
        for(var k in custom){
          opts[k]=custom[k];
        } 
      }
      map = new google.maps.Map(document.getElementById('map_canvas'),
            opts);
}
</script>

<script data-goo="<?php echo htmlentities(json_encode($goo));?>"
        src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=***" async defer>
</script>

另一个选项是 loader of the JSAPI ，您可以选择将函数引用(而不是函数名称)定义为 callback:

<?php
  //your parameters, defined in PHP
  $goo=array('zoom'=>14,'center'=>array('lat'=>52.549,'lng'=>13.425));
?>
<div id="map_canvas"></div>
<script>
function initMap(params){

  var opts = {
                      zoom:   0,
                      center: new google.maps.LatLng(0,0),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                   };

        for(var k in params){
          opts[k]=params[k];
        } 

        map = new google.maps.Map(document.getElementById('map_canvas'),
            opts);
}
</script>

<script src="https://www.google.com/jsapi"></script>
<script>
    google.load('maps', 
                '3', 
                { other_params :'key=***',
                  callback : (function(params){return function(){initMap(params);}})
                              (<?php echo json_encode($goo);?>) });
</script>

然而，听起来所需的数据(最后缩放/居中)首先在客户端可用，因此没有理由将其存储在服务器端。只需通过 sessionStorage 存储它(如@RamRaider 所建议的)甚至 cookie，并在需要时从客户端读取它。