点击载入Google地图

Question

点击载入Google地图

Ada*_*dam 0 jquery google-maps-api-3

单击链接后，我想显示Google Map。

我尝试了以下方法。单击链接后，然后：

div在链接后插入IDmap
使用jQuery方法$ .getScript加载Google Maps API
将Google Maps添加到divID为map

不幸的是，步骤2似乎无效。在JS控制台中，我发现了错误

ReferenceError：未定义google

这是我的代码，但我已经替换为的字符串我的实际谷歌API密钥mykey的行

 $.getScript("https://maps.googleapis.com/maps/api/js?key=mykey");

Run Code Online (Sandbox Code Playgroud)

为什么我不能像这样包含Google Maps API？如何包含它？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script>
    <script>
    $(document).ready(function(){
      $('#showMap').click(function(e){
        e.preventDefault();

        $('#showMap').after("<div id='map' style='height: 200px;background-color:#08c;width: 200px;'></div>");

        $.getScript("https://maps.googleapis.com/maps/api/js?key=mykey");

        $lat   = 10.1364;
        $lng   = -80.2514;

        var myLatLng = {lat: $lat, lng: $lng};

          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: myLatLng
          });

          var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
          });
      });
    });
    </script>
  </head>
  <body>
    <a href='#' id="showMap">Hello</a>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

j_d*_*j_d 6

它工作完全正常。看看这个小提琴。您的问题是您正在同步完成所有初始化工作，而getScript是对外部脚本的异步调用。

的第二个参数$.getScript采用回调函数。

另外，不需要在之后添加地图div，只需将其放在第一位即可。

$('#show-map').click(() => {
  $.getScript('https://maps.googleapis.com/maps/api/js', () => {

    var myLatLng = {
      lat: 10.1364,
      lng: -80.2514
    }

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: myLatLng
    })

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map
    })

  })
})

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，4 月前
查看次数：	2317 次
最近记录：	9 年，4 月前