Question

我想通过url将密钥从父窗口传递给iframe。从URL中获取数据后，我想在地图src中设置它。这可能吗？

因为我在使用此代码时工作正常 -

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=4">
</script>

<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

但如果我这样尝试，我不确定它是否使用了密钥。没有键也谷歌地图的作品。我已经发了一个console.log声明，但它没有打印任何内容。

<!DOCTYPE html>
<html>
<head>
<script>
mapKey="45"
</script>
<script
src="http://maps.googleapis.com/maps/api/js?key="+mapKey>
console.log(mapKey)
</script>

<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

Answer 1

不会在HTML属性中解析javascript，动态创建脚本。

从location.hash

中检索密钥的示例

<script type="text/javascript">
(function(key){
  var url='https://maps.googleapis.com/maps/api/js?v=3&callback=initialize',
      script=document.createElement('script');
  if(key)url+='&key='+key;
  script.setAttribute('src',url);
  //load the API
  document.getElementsByTagName('head')[0].appendChild(script)
}(
  //get the key from the URL
  location.hash.substr(1)
  ));
</script>

注意：删除此行

 google.maps.event.addDomListener(window, 'load', initialize);

.... API会自动运行initialize

样品的iframe：

  <iframe src="iframe.htm#yourmapsapikey"></iframe>

是否可以动态设置Google Map键？

1 个答案: