Question

我希望在点击链接后显示Google地图。

我尝试了以下内容。单击链接后，则：

在标识为div

map

使用jQuery方法$ .getScript
将Google地图添加到ID为div

map

不幸的是，第2步似乎不起作用。在JS控制台中，我发现了错误

ReferenceError：谷歌未定义

这是我的代码，不过我已使用字符串mykey替换了我的实际Google API密钥

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

为什么我不能像这样包含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>

Answer 1

完全正常。看看this fiddle。问题在于你是在同步地执行所有初始化工作，而getScript是对外部脚本的异步调用。

currentText = Encoding.UTF8.GetString(Encoding.Convert( Encoding.Default, Encoding.UTF8, Encoding.Default .GetBytes(inputText) .Where(b => b != '\n') .ToArray() ) );的第二个参数采用回调函数。

此外，之后不需要添加地图div，只需将它放在那里。

$.getScript

点击即可加载谷歌地图

1 个答案: