动态添加脚本到 chrome

Question

我有一些代码用于加载 google 地图 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 中发挥作用，将是一个巨大的帮助。

Answer 1

看起来像是顺序问题。

<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>

动态添加脚本到 chrome

Dynamically add script to chrome

google-maps

google-chrome

pentaho