Google Maps - 如何向函数 initMap 添加参数？答案

【问题标题】：Google Maps - How to add parameters to function initMap?Google Maps - 如何向函数 initMap 添加参数？
【发布时间】：2016-07-21 11:14:07
【问题描述】：

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

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

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

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

【问题讨论】：

分享一些你的代码
我建议使用sessionStorage - 大多数（如果不是全部）现代浏览器都支持，并且很容易从/向/向/向读取/写入数据

标签： javascript php google-maps

【解决方案1】：

您不能将参数传递给回调（至少不能通过加载地图 API 的方式）

一种可能的解决方法：将参数存储为脚本标签的属性，然后您就可以在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>

但是，听起来所需的数据（最后缩放/中心）最初在客户端可用，因此没有理由将其存储在服务器端。只需通过sessionStorage（@RamRaider 建议）甚至 cookie 存储它，并在需要时从客户端读取它。

【讨论】：