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

如标题所述，我在DOM中有lng和lat值，我试图根据DOM中的这两个值显示地图位置，但是地图没有显示任何位置，因为它是灰色的，我怀疑

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的一个问题。但是，为了获得更多信息，我在这个项目中使用了Laravel 6.5.2，这就是为什么我的lat和lng数据位于元素的数据集中的原因

我的laravel代码没有什么特别之处，只是通过控制器方法从数据库中获取数据，并在我的视图上显示，同时设置

data lat

和

data lng

，以便在我的脚本中获取坐标并填充到google地图视图

---

我试过一个叫做Laravel的谷歌地图库，但不幸的是，我也从那个库中得到了一些错误。它不在主题范围内，但您可以查看它。

您可以将您的身体标签更改为以下内容：

---

因此，一旦加载dom，映射将被初始化。

我将使用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();
  }
});

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

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

// execute on load:
waitForElement(initMap);

编辑：（根据您的评论）

在我看来，地图是初始化的，但没有坐标。 我只是重写了coords和fiddle。 如果您有一个有效的GoogleapKey，那么输入它，地图将成功创建

---

已解决

显然。。。这是我犯的一个非常粗心的错误

---

将lat和lng值之间的值翻转到未定义的位置，这就是为什么地图即使已初始化也未显示位置。

您在google地图中是否使用了

defer

或

async

属性，包括标记？像

？如果没有，请尝试添加它们。似乎您的脚本正在尝试以异步模式加载，而不等待所有DOM加载。@alexey novikov是的，我的googleapi脚本具有

defer

和

async

标记。请删除它们，然后尝试以默认的非异步模式运行脚本？尝试过，没有更改。发布的代码中有一个拼写错误：

中心：{lat:latData，lng:latData}

，应该是

center:{lat:latData，lng:lngData}

。即使不解决这个问题，我也不会得到灰色瓷砖（但可能您使用的坐标与）。请提供一个例子来说明您的问题。我已尝试使用readystate，但它也不起作用。我已使用谷歌地图的图像更新了帖子，希望它提供更好的上下文。出现了什么问题

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

// execute on load:
waitForElement(initMap);

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
    });
}