DOM 内容加载后初始化 Google 地图

Question

如标题所述，我的 DOM 中有 lng 和 lat 值，我试图根据 DOM 中的这 2 个值显示地图位置，但是地图没有显示任何位置，因为它是灰色的，我怀疑initMap函数在加载内容之前正在执行。 有没有办法在内容加载后初始化地图？ 这是我的一些代码。

控制器

public function show($id)
{

    $report = Report::find($id);

    return view('report',compact('report'));
}

看法

<p class="title" id="reportId" data-id="{{$report->id}}" data-lat="{{$report->latitude}}"
    data-lng="{{$report->longitude}}">{{$report->title}}</p>

JavaScript

function initMap() {

    const latData = parseFloat(document.getElementById('reportId').getAttribute('data-lat'));
    const lngData =  parseFloat(document.getElementById('reportId').getAttribute('data-lng'));

    console.log(typeof latData);

    var options = {
        zoom: 15,
        center: {
            lat : latData,
            lng : lngData
        }
    };

    var map = new google.maps.Map(
        document.getElementById("map"),
        options
    );

    var marker = new google.maps.Marker({
        position: {
            lat : 3.119822,
            lng : 101.594800
        },
        map: map
    });
}

这是地图的样子

编辑

我一开始没有包含这个，因为我认为这只是 JavaScript 的一个问题，但是，有关更多信息，我在这个项目中使用 Laravel 6.5.2，这就是我的 lat 和 lng 数据位于元素数据集内的原因。

我的 Laravel 代码没有什么特别之处，只是通过控制器方法从数据库中获取数据并同时设置data-lat和data-lng显示到我的视图上，以便在我的脚本中我可以获得坐标并填充到谷歌地图视图。

我尝试了一个名为Googlmapper 的Laravel Google Map 库，但不幸的是我也从该库中收到了一些错误。 它超出了主题，但您可以在此处查看。

Answer 1

您可以将 body 标签更改为以下内容：

<body onload="initMap()">

这样一旦 dom 加载，地图将被初始化。

Answer 2

我会使用 Document.readyState。 Document.readyState 属性描述文档的加载状态。

文档的 readyState 可以是以下之一：

加载

The document is still loading.

交互的

The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.

完全的

The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

所以在你的情况下：

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === 'interactive') {
    //
  }
  else if (event.target.readyState === 'complete') {
    initMap();
  }
});

来源 Mozilla

第二种解决方案：如果您将在 dom 已经加载后通过 ajax 加载内容并且这可能需要一些时间，您可以设置超时功能，但您永远不会知道对象何时加载。 然后您可以跟踪 dom 对象的存在，如果它是 dom 内容的一部分，则读取该值并执行您的函数：

function waitForElement(callback){
    if(window.someVariable){
        callback();
    } else{
        setTimeout(waitForElement(callback), 250);
    }
}

// execute on load:
waitForElement(initMap);

编辑：（根据您的评论）

在我看来，地图已初始化但没有坐标。 我只是重写了坐标并创建了一个小提琴。 如果您有有效的 GoogleApiKey，则输入它，地图将成功创建。

JsFiddle GoogleMaps-example

function initMap() {

    const latData = parseFloat(document.getElementById('reportId').getAttribute('data-lat'));
    const lngData =  parseFloat(document.getElementById('reportId').getAttribute('data-lng'));

    var uluru = {lat: latData, lng: lngData};
    console.log(typeof latData);

    var options = {
        zoom: 15,
        center: uluru
    };

    var map = new google.maps.Map(
        document.getElementById("map"),
        options
    );

    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}

Answer 3

解决了

显然……这是我一个很粗心的错误。

这是翻转 lat 和 lng 值之间的值，导致未定义的位置，这就是为什么地图甚至认为它已被初始化也没有显示位置的原因。

DOM 内容加载后初始化 Google 地图

问题描述

3 个解决方案

解决方案1
-1 2019-11-24 08:40:09

解决方案2
-1 2019-11-24 10:15:19

解决方案3
-1 2019-11-24 13:35:27

DOM 内容加载后初始化 Google 地图

问题描述

3 个解决方案

解决方案1 -1 2019-11-24 08:40:09

解决方案2 -1 2019-11-24 10:15:19

解决方案3 -1 2019-11-24 13:35:27

解决方案1
-1 2019-11-24 08:40:09

解决方案2
-1 2019-11-24 10:15:19

解决方案3
-1 2019-11-24 13:35:27