Question

我们创建了一个使用Google Maps Geolocation，Geocomplete和SimpleWeather的天气小工具。可以看到小部件的工作版本here。一切都在这种环境中起作用。

但是，我们需要使用Optimizely将此小部件实现到网页中。这将需要从单个Javascript文件异步加载各种脚本和html。这导致了问题，特别是Google Maps Geolocation（我认为）。

可以看到here，窗口小部件正确显示，但当用户尝试获取其当前位置或搜索其位置时，没有任何反应。控制台中有很多错误我并不完全理解，但让我认为主要问题是Google Maps Geolocation未在此页面上正确加载。我已阅读docs并尝试过在那里建议的内容，并使用Google Loader加载文件。这些都不起作用 - 控制台错误保持不变。

我很确定这可能是一个非常愚蠢或简单忽视的东西，所以如果有人能给出一些输入，那就太棒了。我之前从未使用异步文件，因此欢迎任何帮助。

这是我的代码：

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Weather Widget</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="weather1.js" type="text/javascript"></script>
</head>    
<body></body>    
</html>

weather1.js

function loadScript1() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://www.google.com/jsapi';
  document.getElementsByTagName("head")[0].appendChild(script)
}

function loadScript2() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.innerHTML = 'google.load("geolocation", "1", {callback: initialize}); google.load("maps", "3", {callback: initialize}); google.load("gdata", "1", {callback: initialize});';
  document.body.appendChild(script)
}

function loadScript4() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://maps.google.com/maps/api/js?sensor=true&libraries=places&language=en-US&callback=initialize';
  document.getElementsByTagName("head")[0].appendChild(script)
}

function applyWeatherStyle() {
    var weatherStyle = document.createElement('style');
    weatherStyle.type = 'text/css';
    weatherStyle.innerHTML = '/*Leaving styling out for instructional purposes */';
    document.getElementsByTagName("head")[0].appendChild(weatherStyle)
}

function loadScript6() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.gstatic.com/maps-api-v3/api/js/21/5a/main.js';
  document.body.appendChild(script);
}

function loadScript7() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://s3.mirror.co.uk/weather-mvt/jquery.geocomplete.js';
  document.body.appendChild(script);
}

function loadScript8() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://s3.mirror.co.uk/weather-mvt/jquery.simpleWeather.js';
  document.body.appendChild(script);
}

function loadTheWidget() {
  var theWidget = document.createElement('div');
  theWidget.innerHTML = '<div id="overlay-wrapper-loco"><div id="overlay"></div><div id="box" style="left: 36%;"> <a id="boxclose">X</a> <div id="close"> <div class="weather-text">Find out the<br>weather near you</div><div class="enterLocation" style="display:block; position:relative; width:100%;"><input type="text" value="Enter postcode or city" onfocus="this.value=\'\'" onblur="(this.value==\'\')?this.value=\'\'=" id="address" class="postcode" onkeydown="if (event.keyCode==13) document.getElementById(\'getThisweather\').click()" required=""> <button onclick="hide(\'close\')" class="button-2" id="getThisweather" type="button" required="">→</button> <span class="weather-or">Or</span><button onclick="hide(\'close\')" class="button-1" id="currentlocation">Current Location</button></div></div><div id="weather"></div></div></div>';
  document.body.appendChild(theWidget);
}

function loadScript9() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://www.major-design.co.uk/kate/weather_func.js';
  document.body.appendChild(script);
}



function ratweather() {
  loadScript1();
  loadScript2();
  loadScript4();
  applyWeatherStyle();
  loadScript6();
  loadScript7();
  loadScript8();
  loadTheWidget();
  loadScript9();
}

window.onload = ratweather;

加载Google地图地理位置异步无法正常工作

0 个答案: