时间戳

首页 > 解决方案 > 将脚本动态添加到 chrome

google-maps - 将脚本动态添加到 chrome

问题描述

我有一些代码用于加载谷歌地图 API 并动态获取密钥。它在 Firefox 和 IE 中完美运行，但不适用于 Chrome。

<script>addScript('&libraries=visualization')</script>


function addScript(str) {
    str = str || '';

    var src = 'https://maps.googleapis.com/maps/api/js?key=' + getMapKey() + str;
    var s = document.createElement('script');

    s.setAttribute( 'src', src );
    s.setAttribute('defer', 'defer');
    document.body.appendChild( s );
}

任何帮助使其在 Chrome 中工作都将是一个巨大的帮助。

标签： google-mapsgoogle-chromepentaho

解决方案

看起来像一个订购问题。

<script>
function addScript(str) {
    str = str || '';

    var src = 'https://maps.googleapis.com/maps/api/js?key=' + getMapKey() + str;
    var s = document.createElement('script');

    s.setAttribute( 'src', src );
    s.setAttribute('defer', 'defer');
    document.body.appendChild( s );
}
</script>
<script>addScript('&libraries=visualization&callback=initMap')</script>
<div id="map"></div>
<script>
  function initMap() {
  // var fullstack = {lat: 40.705523, lng: -74.009149};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 18,
    maxZoom: 19,
    minZoom: 16 ,
    center: {lat: 40.705523, lng: -74.009149},
    disableDefaultUI: false
  });
  var createMarker = function(lat, lng, draggable) {
    return new google.maps.Marker({
      position: {
        lat: lat,
        lng: lng
      },
      map: map,
      draggable: draggable
    })
  }
  var marker = createMarker(40.705523, -74.009149, true);
}
</script>

工作代码片段（在 Chrome 中工作；没有密钥）： 

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script>
function addScript(str) {
    str = str || '';

    var src = 'https://maps.googleapis.com/maps/api/js'+ str;
    var s = document.createElement('script');

    s.setAttribute( 'src', src );
    s.setAttribute('defer', 'defer');
    document.body.appendChild( s );
}
</script>
<script>addScript('?libraries=visualization&callback=initMap')</script>
<div id="map"></div>
<script>
  function initMap() {
  // var fullstack = {lat: 40.705523, lng: -74.009149};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 18,
    maxZoom: 19,
    minZoom: 16 ,
    center: {lat: 40.705523, lng: -74.009149},
    disableDefaultUI: false
  });
  var createMarker = function(lat, lng, draggable) {
    return new google.maps.Marker({
      position: {
        lat: lat,
        lng: lng
      },
      map: map,
      draggable: draggable
    })
  }
  var marker = createMarker(40.705523, -74.009149, true);
}
</script>

推荐阅读