Question

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

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

Answer 1

Url不直接加载div。因此，您可以在此类div上附加iframe来加载地图。

＆＃13;

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

＆＃13;

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

＆＃13;

或者如果您不想使用iframe，请使用embed标记。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以触发DIV加载事件

HTML iframe Tag

标签指定内联框架。

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

＆＃13;

$(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>"); 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div onload="displayMap()" id ="map"></div>

＆＃13;

您可以显示不带iframe的地图

HTML object Tag

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

＆＃13;

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

＆＃13;

Difference between and tag

Answer 3

试试这个，

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

OR

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

OR

$(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 />');          
});

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

3 个答案:

您可以触发DIV加载事件