时间戳

首页 > 解决方案 > 页面加载后从 myshiptracking 加载地图

javascript - 页面加载后从 myshiptracking 加载地图

问题描述

除了本主题之外，在页面加载完成后执行 javascript我注意到该解决方案不适用于加载地图。我确实有一个类似的用例。但是，如果我遵循脚本，则不会加载所需的脚本。

我想在页面加载完成后加载地图，但是我确实在页面源中看到了脚本，但没有执行任何脚本。

来源是：

var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("head")[0].appendChild(element);
}

在页面源代码中，我看到：

var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("head")[0].appendChild(element);
}

有人可以指点我如何执行脚本的方向吗？我还假设脚本应该附加到“body”而不是“head”，但我不确定。谢谢！

基于编辑的头部到身体的变化：

<script>
     var mst_width="96%";var mst_height="350vh";var mst_border="0";var mst_map_style="simple";var mst_mmsi="244770624";var mst_show_track="true";var mst_show_info="true";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
    window.onload = function() {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("body")[0].appendChild(element );
      }
 </script>

标签： javascripthtmlleaflet

解决方案

所以，最后我设法解决了这个问题，并在我的浏览器中获得了所需的地图......使用以下 HTML+JS 代码（您可以使用下面的按钮运行）：

<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
var mst_width="100%";var mst_height="450px";var mst_border="0";var mst_map_style="terrain";var mst_mmsi="";var mst_show_track="";var mst_show_info="";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
	  
	  function loadMap() {
		var element = document.createElement("script");
		element.setAttribute("id", "myshiptrackingscript");
		element.setAttribute("async", "");
		element.setAttribute("defer", "");
		element.src = "http://www.myshiptracking.com/js/widgetApi.js";
		document.getElementById("mapContent").appendChild(element );
	  }      
       window.onload = loadMap
     console.log('Registered onload')
</script>
</head><body>
	<div id="mapContent" />
</body></html>

两个注意点：

  1. 您应该将创建的标签添加script为属于body该页面的标签的子标签（我使用<div id="mapContent"/>并getElementById访问它）
  2. 您应该通过 URL 加载 HTML 页面http://，而不是通过一个 URL file://：使用后者，您会收到一条错误消息，例如“浏览器不支持嵌入式对象”

我希望这可以帮助您解决实际案例中的问题！

推荐阅读