javascript - 如何将 `google map`到 `div`直接加载到容器中？

Question

我需要将 map 加载到我的页面。我的网址是:

https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en

如果我粘贴上面的 url，我就会在浏览器中加载 map 。 与我尝试将此 map 加载到我的网页中的方式相同。但是没有加载..

将上述 map 加载到我的网页的正确方法是什么？

这是我的尝试:

$(function(){

  var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";

  $("#map").load(mapURL);

});

Live Demo

Answer 1

Url 不会直接加载到 div 上。所以你可以像这样在 div 上附加 iframe 来加载 map 。

$(function() {
  var html = '<iframe src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en"></iframe>';
  $("#map").append(html);
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'><map>
<div id='map1'><map>

或者如果您不想使用 iframe，您可以使用 embed 标签。

var html='<embed src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width=200 height=200 />';
 $("#map").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>