Question

我正在查看一些新手Google Maps API教程代码。

They have an example说明了在页面加载完成后如何动态地向页面添加一些脚本。我想知道如果我使用JQuery这段代码是否可以缩短？

这是代码......

function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

可能？

Answer 1

当然你可以将一些调用改为jQuery，但我认为你不会在这里严重缩短任何内容。

在jQuery中看起来像这样：

function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
}

$(document).ready(
  function{ 
    $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=initialize');
  });

Answer 2

不是真的。当然不足以抵消50-80KB的jQuery下载。

我的理由是，此代码的大部分内容都是使用Google的地图库。 jQuery无法与其中的大部分进行交互，而且，鉴于它正在做的事情，它已经非常紧凑。我没有看到您的代码存在问题。

你可以将它压缩一点......但它会以可读性为代价来节省你的字节。

function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

window.onload = function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
};

Answer 3

function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
}

$(function{
  $("<script></script>").attr("type", "text/javascript").attr("src", "http://maps.google.com/maps/api/js?sensor=false&callback=initialize").appendTo("head");
});

或者，@ Tgr的建议：

$.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=initialize", function(){
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
});

Answer 4

jQuery有自己的脚本加载器getScript()。

Answer 5

您可以通过将脚本直接放在页面中来避免脚本注入，甚至删除一些无用的变量，即：

<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
<script>
  function initialize() {
    return new google.maps.Map(document.getElementById("map_canvas"),{
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644),
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });
}
</script>
<script src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize">
</script>
</body>

可以用JQuery缩短这个Javascript吗？

5 个答案: