问题标签 [ng-map]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
22110 浏览

angularjs - 在 ngMap 中使用带有标记的 ng-repeat

我想使用ngMap将 Google 地图添加到我的应用程序中。

这些演示是“静态的”,因为它们只有硬编码的 HTML。我希望我的代码是“动态的”,因为它会定期要求服务器查看其数据库并返回一堆坐标来绘制,这些坐标会随着时间而变化。我希望这很清楚;如果没有,请询​​问更多详细信息。

我修改了ngmap 标记演示以每两秒生成一些随机纬度/经度坐标(而不是像我的最终应用程序那样访问我的服务器)。请参阅Plunk

控制台中没有错误,而且似乎 ngMap 正在尝试添加我的标记,因为我在控制台中看到了很多这样的事情......

其中 K 和 A 是我期望的纬度/经度。

但是...我在地图上看不到任何标记。我究竟做错了什么?


[更新] 一个很好的答案,之后我很高兴地为此获得了赏金。对于其他阅读本文并希望使用 ngMap 的人,正如@allenhwkim 在另一个 stackoverflow 问题中所说,我认为,在他的博客上,ngMap 只是为您创建地图,然后您使用标准的 Google Maps API 操作它。

例如,就在循环添加标记之前,我声明
var bounds = new google.maps.LatLngBounds();了并且在循环中,在将标记添加到地图之后,我bounds.extend(latlng);,最后,在循环之后,我

我分叉了答案并创建了一个新的 Plunk来展示这一点。不是世界上最有用的功能,但重点只是展示如何使用$scope.mapGoogle Maps API。再次感谢 Allen,感谢 ngMap。

0 投票
0 回答
62 浏览

angularjs - 谷歌地图不会在 Angularjs 中更新

我有谷歌地图模型ng-map,当我写位置时它没有显示那个地方,但是如果我们检查然后它就会放在center="London"那个位置

0 投票
4 回答
5864 浏览

javascript - 谷歌地图的响应式设计

ng-map用来在我的 Angular 应用程序中显示谷歌地图,但他很可能是一个直接的 JS 问题(甚至只是 CSS?)。

如何实现响应式设计,以便我的地图在不同的显示尺寸(无论是桌面/移动设备,还是只是用户调整浏览器页面大小)上看起来都很好?

这个页面做到了,但它使用 I 帧并且只有一个静态地图,而我将在运行时更新我的​​地图(定期跟踪)。

我对这一切都很陌生,所以我希望我可以理解地表达我的问题。

0 投票
2 回答
9567 浏览

angularjs - ng-map 显示两点之间的最佳方式(航路点)

我正在使用带有 IonicFramework 和 ng-map 的 Angularjs。我已阅读此处的所有文档(链接),但我没有找到如何向用户展示将用户当前位置转到另一个位置的最佳方式(或简单方式)。

我也读过这个这个,但我想使用角度。

0 投票
1 回答
2684 浏览

angularjs - 无法使用离子框架和 ngMap 将谷歌地图居中

我正在使用 Ionic Framework b14 和最新的 ngmap,

我有一个显示地图的视图,但是当我想设置中心时,它不显示我从服务中获得的坐标。

我想这与服务器响应所需的时间有关,但我不知道如何解决它,您可以给我任何帮助。

谢谢。

0 投票
1 回答
11361 浏览

javascript - 在 ngMap 中使用事件监听器

我在一个项目中使用 Allenhwkim 的精彩 ngMap。我知道我需要使用 Maps Javascript v3 API 来操作地图,除了我无法获得任何事件侦听器(例如,$google.maps.event.addListener(markers[i], 'click', function()... 工作)之外一切顺利

具体来说,我正在尝试在我的标记上创建一个 onClick 事件。这是一个例子:http ://plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW?p=preview

在这里,我尝试在标记指令上使用 ng-click 属性。不过,我什么也得不到。http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview

0 投票
1 回答
1372 浏览

angularjs - 错误:[$injector:unpr] http://errors.angularjs.org/1.3.4/$injector/unpr?p0=%24ngMapProvider%20%3C-%20%24ngMap 错误(本机)

运行应用程序时出现以下错误。只是想知道如果有人经历过同样的事情,这意味着什么?

错误:[$injector:unpr] http://errors.angularjs.org/1.3.4/$injector/unpr?p0=%24ngMapProvider%20%3C-%20%24ngMap在错误(本机)在https:// ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:6:416https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min。 js:38:22 在 Object.d [as get] ( https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:36:49 ) 在https://ajax .googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:38:94 在 d ( https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min .js:36:49 ) 在 e ( https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:36:310) 在 Object.instantiate ( https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:36:451 ) 在 $get ( https://ajax.googleapis.com/ ajax/libs/angularjs/1.3.4/angular.min.js:75:409 ) 在http://localhost:11080/angularui/ui-bootstrap-tpls-0.12.0.min.js:8:29473

注意:这里发布的代码有点复杂。

0 投票
1 回答
1445 浏览

ionic - 离子 ngMap 信息窗口在设备上不起作用

我一直在使用由 allenhwkim 创建的很棒的 ngMap 指令,但是在设备上显示信息窗口的标记存在问题。我已经尝试过为不同的元素嵌套“data-tap-disabled='true'”和“scroll='false'”的不同方法,但没有运气。

我真的很喜欢他放在一起的 markercluster 模块,所以我一直在尝试依赖它,因为我们需要在大面积上绘制多个标记。在 repo 中有一个很好的例子,它使用自定义指令在全球范围内绘制商店,当点击事件被触发时,当缩放到足以看到单个标记时,会出现一个带有一些数据的信息窗口。从 Chrome 测试时一切正常,但在 Android 设备和 iOs 模拟器上测试时,信息窗口不会出现。但是,似乎正在注册点击,因为设备上的屏幕/地图移动,好像应该出现信息窗口(如从 Chrome 进行测试)。

myDirective.js

地图.html

控制器附加点击监听器

样式.css

div#map-container div[add-stuff-info] {位置:绝对;显示:无;顶部:5px;右:5px;底部:5px;宽度:40% } div#map-container div[add-stuff-info] a.hide-link { float:right } div#map-container div[add-stuff-info] table { 宽度:100% } div#地图容器 div [add-stuff-info] table td { text-align: left; 填充:5px;边框:1px 实心#ccc }

我似乎无法弄清楚这里的问题。我意识到的一件事是删除 this.element.css('display', 'block'); 从 Chrome 的指令和测试来看,浏览器似乎就像设备一样 - 地图会发生变化,因为它会显示信息窗口......

0 投票
1 回答
968 浏览

angularjs - Angular:更改事件处理程序内的路径不起作用

我是 angular 新手,在更改事件处理程序内部的位置时遇到问题。该处理程序用于定位在谷歌地图上的标记。我正在使用 ng-map(非常棒)。

下面是创建标记的代码(在 $http get 的成功回调中运行):

事件处理程序非常简单:

当我单击标记时,处理程序将执行,并执行 if/then/else 语句。但是,位置不会改变。

这是因为我在角度的“上下文”之外,因为我通过谷歌地图设置了事件监听器?

附加信息

感谢有关使用 window.location 的建议。我之前没有提到的是地图是局部视图的一部分,所以我不想触发页面重新加载——我希望 Angular 根据位置变化来更新局部视图。我知道它可以做到,因为 $location.path('/unit') 在该事件处理程序之外工作得很好。

0 投票
1 回答
3195 浏览

angularjs - ng-map:设置缩放级别时无法读取未定义的属性“应用”

我在 angularjs 应用程序中使用 ngMap。当我尝试在地图元素上设置缩放时遇到错误。这是来自 Chrome 控制台的错误消息:

这是在我的地图元素的缩放属性时触发的:

被绑定到我的角度控制器:

dataContext 是在应用程序中公开各种状态变量的服务。我还尝试通过函数设置 $scope.zoom ,但结果相同。

错误发生在 ng-map.js 文件的第 1568 行:

在试图追踪正在发生的事情时,我遵循了设置中心和设置缩放的执行(设置中心不会导致问题)。设置中心执行第 1568 行并继续其愉快的方式。

设置缩放(通过 setZoom 函数)会导致 ng-map.js 中第 196 行的代码执行:

第 205 行导致异常,导致谷歌地图的 main.js 文件中出现错误。

知道是什么原因造成的吗?以及如何解决它:)?

可能的解决方案

多玩一点,我注意到它本身并没有设置缩放级别,这会导致问题。它实际上是 zoomchanged 事件触发的结果 >>after<< 缩放改变。

第一次在地图上设置缩放,第 204 行:

评估为空。我不确定为什么会这样,因为我不明白那条线在做什么。

然而,未来对缩放的更改使同一行 204 解析为 f 的非空值。

因此,作为一种解决方法,我将第 205 行和第 206 行括起来,如下所示:

错误消失了。