代码之家 › 专栏 › 技术社区 › Pure.Krome

这个Javascript可以用JQuery缩短吗?

google-maps-api-3 jquery javascript

Pure.Krome · 技术社区 · 14 年前

我正在检查一些新手谷歌地图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;

可能吗?

5 回复 | 直到 14 年前

Strelok 14 年前

当然,您可以将一些调用更改为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');
  });

Oli 14 年前

我的理由是大部分代码都是使用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);
};

Chris Laplante 14 年前

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);
});

Tgr 14 年前

getScript() .

Mic 14 年前

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