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

问题描述

如标题中所述，我在我的 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 代码没有什么特别之处，只是通过控制器方法从数据库中获取数据，并在设置 a 的同时显示到我的视图上data-lat，data-lng这样我就可以在我的脚本中获取坐标并填充到谷歌地图视图中。

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

标签： javascriptlaravelgoogle-maps

解决方案

我会使用 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-示例

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

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

问题描述

解决方案

推荐阅读