javascript - Ng-map - 标记上的信息窗口有时不会出现

标签 javascript angularjs google-maps ng-map

我正在使用 ng-map 指令来显示 map 。 map 上有标记,只要鼠标悬停在标记上,就会显示一个信息窗口。然而,有时信息窗口不会出现。

除此之外,我无法确定正在发生的事情的任何模式,因为问题每次都发生在不同的标记上。我正在将数据输出到信息窗口,但问题似乎与“数据相关”无关,因为所选位置的所有数据在问题发生时似乎都是正确的。

我有一个在鼠标悬停时调用的 showInfo 方法,如下所示:

showInfo(event, loc, infoWindowTemplate, map, mapsController) {
  • loc - 点击位置的数据
  • infoWindowTemplate - 要使用的信息窗口模板(这对于特定 map 总是相同的,但是这是可配置的,所以如果我显示移动 map ,我使用一个信息窗口模板,如果我显示桌面 map ,我用的是不同的)
  • map - 对 Controller 上 NgMap 对象的引用
  • mapsController - Controller 本身(我强烈怀疑这是一种糟糕的代码味道 - 这是我想出的在鼠标悬停后获取对 Controller 的引用的最简单方法)

这是方法的主体:

        map.getMap(mapsController.mapId).then(function (myMap) {

            var selectedMarker = myMap.markers["L: " + loc.position[0] + ", " + loc.position[1]];
            selectedMarker.locationInfo = loc;

            console.log("about to show infowindow - infoWindowTemplate = " + infoWindowTemplate);
            // console output = "cached-myTemplate.html"

            myMap.showInfoWindow(infoWindowTemplate, selectedMarker);

selectedMarker 肯定是指正确的标记对象。我的模板如下所示:

<script id="cached-myTemplate.html" type="text/ng-template">
        <a class="map-location__link" href="/locations/{{anchor.locationInfo.locationId}}" target="_blank">
                <img src="{{anchor.locationInfo.locationImageThumbnail}}" />
        </a>
</script>

问题似乎是调用“showInfoWindow”以某种方式间歇性地失败(尽管控制台中没有错误)。任何关于可能导致问题的原因或我可以做些什么来诊断它的想法的评论或答案将不胜感激!

最佳答案

我发现这是一个时间问题。延迟调用 showInfoWindow 的“转弯”(通过添加短超时)解决了这个问题:

map.getMap(mapsController.mapId).then(function (myMap) {

            ....

            this.$timeout(function () {
                dealmap.showInfoWindow(infoWindowTemplate, selectedMarker);
            }, 100)

}.bind(this));

关于javascript - Ng-map - 标记上的信息窗口有时不会出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46402918/

相关文章:

android - 我的应用应该多久使用 GPS 更新一次用户的位置?每 1 秒是矫枉过正还是罚款?

python - django 表单字段小部件中 3.35 版的 Google map API 问题

javascript - 在 Vanilla JS 中 - 用户完成输入后更改变量

javascript - 如何在 ng-repeat 表中查找单选按钮值?

javascript - 如何通过 api 获取数据并用它渲染子组件 - react 谷歌地图

javascript - $http.get 调用将错误数据返回到 Angular UI-Grid 控件

javascript - 如何从 $http.get 请求中删除 header 并将 "application/json"和 "text/plain"添加到 "Accept"

javascript - Bootstrap Accordion : Expand/Collapse all not working

javascript - 有没有办法尝试加载 HTML/JavaScript 中的文件,并在未加载时进行回退?

javascript - 制作一个 JavaScript 聊天机器人将聊天命令转换为另一个程序中的按键