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

Posted 2023-03-05

【中文标题】如何将`google map`直接加载到`div`到容器中？

【英文标题】：How to load `google map` to `div` directly to container?

【发布时间】：2018-09-26 22:27:57

【问题描述】：

我需要将地图加载到我的页面。我有那个网址：

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

如果我粘贴上面的网址，我会在浏览器中加载地图。 同样，我试图将此地图加载到我的网页中。但是没有加载..

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

这是我的尝试：

$(function()

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

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

);

Live Demo

【参考方案1】：

试试这个，

$(window).on('load', function()          
    var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";          
    $("#map").html('<iframe src="'+mapURL+'"  ></iframe>');          
);

或

$(window).on('load', function()          
    var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";          
    $("#map").html('<object data="'+mapURL+'"   type="text/html">Loading Map</object>');          
);

或

$(window).on('load', function()          
    var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
    $("#map").html('<embed id="map" src="'+mapURL+'" width=600 height=450 />');          
);

【讨论】：

没有 iframe 就无法加载..？你能更新我的 plunkr 吗？

【参考方案2】：

Url 不会直接加载到 div 上。因此您可以像这样在 div 上附加 iframe 以加载地图。

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

【参考方案3】：

可以触发DIV加载事件

HTML iframe Tag

标签指定一个内联框架。

内嵌框架用于在当前 HTML 文档中嵌入另一个文档。

$(function()
	$('div[onload]').trigger('onload');
);


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div onload="displayMap()" id ="map"></div>

您可以在没有 iframe 的情况下显示您的地图

HTML object Tag

标签定义了 HTML 文档中的嵌入对象。使用此元素在您的网页中嵌入多媒体（如音频、视频、Java 小程序、ActiveX、PDF 和 Flash）。

<div> 
    <object type="text/html" data="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en"   style="overflow:auto;border:1px solid">
    </object>
</div>

Difference between and tag

【讨论】：

object 和 iframe- 之间有什么区别？

@user2024080，在这里查看 iframe、object 和 embed 之间的区别：bencreasy.com/object-versus-embed