0

我正在尝试通过ajax请求将谷歌地图加载到div中，因此我尝试了下面的代码。

<script type="text/javascript">
$(document).ready(function() {
  $('a.lnk').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
    return false;
  });
});
</script>
</head>
<body>
<h1>Web page test.html</h1>
<a href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=6.9906664862927625,+80.74805527925491&aq=&sll=37.0625,-95.677068&sspn=36.094886,86.572266&vpsrc=0&ie=UTF8&t=m&z=14&ll=6.990666,80.748055&output=embed" title="Get extern" class="lnk">Get extern</a>
<div id="content">load here</div>

如果我尝试加载外部 html 文件，则此代码不会加载地图，而是 google map url，然后它可以工作。任何人都可以告诉如何将 ajax 请求中的谷歌地图加载到 div。

4

1 回答 1

0

由于相同的来源策略，您的浏览器不会让您从 div 中的不同服务器加载任何内容

您可以做的是在 中加载地图iframe，这是您的 HTML 的一部分，您可以在其中安全地加载外部站点。

这将是 HTML：

<h1>Web page test.html</h1>
<a href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=6.9906664862927625,+80.74805527925491&aq=&sll=37.0625,-95.677068&sspn=36.094886,86.572266&vpsrc=0&ie=UTF8&t=m&z=14&ll=6.990666,80.748055&output=embed" title="Get extern" class="lnk">Get extern</a>
<iframe id="content">load here</iframe>​

这是JavaScript：

$(document).ready(function() {
    $('a.lnk').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $('#content').attr('src', url);
        return false;
    });
});​

在此处查看一个工作示例

于 2012-11-17T15:22:01.167 回答