Question

所以我正在尝试将Google自动填充功能与Google Maps API V3结合使用。

用户将在地址字段（第1页）中输入地址，单击“下一步”，然后将出现一个灯箱（第2页），其中包含他们输入的地址的地图。

所以会发生的是，地址的lat + long（来自page1）将作为查询参数传递到灯箱URL（page2）。下面的脚本需要使用lat + long来构建页面加载。

以下是默认的Google地图

<script>
  function initMap() {
    var address = {lat: lat_address, lng: lng_address};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: address
    });
    var marker = new google.maps.Marker({
      position: address,
      map: map
    });
  }
</script>

我不确定的是如何在页面加载上构建脚本。有人可以提出建议吗？谢谢！

Answer 1

实际上我只是利用函数getQueryVariable来解决这个问题，从URL中获取每个查询参数的值，然后在initMap中使用它来在页面加载时传递变量。

<script>
  //Function that allows easy access to param->value
  function getQueryVariable(variable)
  {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }
    return(false);
  }

  //Initialize the GMap
  function initMap() {
    var latAddress = getQueryVariable('lat_address');
    var latAddress = parseInt(latAddress);

    var lngAddress = getQueryVariable('lng_address');
    var lngAddress = parseInt(lngAddress);

    var address = {lat: latAddress, lng: lngAddress};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: address
    });
    var marker = new google.maps.Marker({
      position: address,
      map: map
    });
  }
</script>

动态创建Google Maps API V3脚本功能

1 个答案: