here-api未捕获TypeError:无法读取未定义的属性“”addDomListener“”

Question

我正在尝试将here-api地图集成到我的rails 5应用程序中。一些背景我开发了一个类似的应用程序页面与谷歌地图在过去的课程成功。使用here-api作为替代方案，因为google最近正在收取一定的费用。

我已经成功地使用lng和后来的硬编码显示了一个here地图。然而，当我尝试集成rails数据库信息lng和lng时，我得到了一个空白屏幕。尝试与我过去集成google时相同的命名约定和方法。我正在使用/使用gem 'geocoder'，'~> 1.4‘。因为我正在转换的地址从表格到lng有限公司，我必须为谷歌地图。chrome控制台日志有一个错误:未捕获窗口:无法读取未定义的属性'addDomListener‘的行:H.Map.event.addDomListener(TypeError，'load'，initialize)；

预期结果:使用addDom初始化当一个地址发生更改时，它使用新的lng lat更新数据库，并使用var location获取lng & lat。而不是成功的硬编码坐标。期望here-api使用这些lng，稍后它会显示与硬编码版本相同的地图。然而，我得到一个空白屏幕。

工作:当地址更改时，正确的lng & lat会显示在数据库中，而在chrome检查中，lng & lat会显示在html中。

对于google，我必须使用以下命令：

Google.maps.event.addDomListener(窗口，‘加载’，初始化)；

这里我使用了(不确定它的方法是否正确)：H.Map.event.addDomListener(window，'load'，initialize)；

下面是无法工作的应用程序的标题部分

<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"
          type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
          type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"
          type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css"
        href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />

下面是部分视图html.erb

<div class="card-body">
    <div id="mapContainer" style="width: 100%; height: 400px"></div>

    <script>
        var platform = new H.service.Platform({
            'app_id': 'my_appid_info-FROM_HERE',
            'app_code': 'myappcodeinfo_FROM HERE'
        });

        // Obtain the default map types from the platform objec

        var maptypes = platform.createDefaultLayers();



        // Instantiate (and display) a map object:
        function initialize() {
            var location = {lat: <%= @location.latitude %>, lng: <%= 
@location.longitude %>};
            var map = new 
H.Map(document.getElementById('mapContainer'), maptypes.normal.map, {
                center: location,
                zoom: 10

            });
        }


       H.Map.event.addDomListener(window, 'load', initialize);

    </script>


  </div>

非常感谢您的帮助。

Answer 1

没有这样的函数H.Map.event.addDomListener。

如果您想在窗口加载事件上调用initialize，请使用：

 window.addEventListener('load', initialize);

关于地图事件，在H.mapevents包下有一些方法。如果需要，请确保加载mapsjs-mapevents.js。这对于在地图对象上添加事件侦听器，甚至在地图上启用平移、缩放等事件的操作非常有用。

您可以参考javascript examples。