Question

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

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

问题是我们以这种方式调用函数：

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

Answer 1

您无法将参数传递给回调（至少不是通过加载maps-API的方式）

可能的解决方法：将参数存储为script-tag的属性，然后您就可以在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(){

  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>

然而，由于听起来首先在clientSide上提供了所需的数据（最后一个缩放/中心），因此没有理由将它存储在serverSide上。只需通过sessionStorage（由@RamRaider建议）或甚至cookie存储它，并在需要时从客户端读取它。

Google Maps - 如何为initMap函数添加参数？

1 个答案: