当前位置: 首页 > 面试题库 >

在ngMap中将ng-repeat与标记一起使用

顾昊穹
2023-03-14
问题内容

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

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

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

控制台中没有错误,并且ngMap似乎正在尝试添加我的标记,因为我在控制台中看到很多这类的东西…

adding marker with options,  
Object {ngRepeat: "myMarker in markers", position: O}
clickable: true
ngRepeat: "myMarker in markers"
position: O
A: 103.96749299999999
k: 1.387454
__proto__: O
visible: true
__proto__: Object

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

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

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

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

var centre = bounds.getCenter();  
$scope.map.setCenter(centre);

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


问题答案:

答案在这里

http://plnkr.co/edit/Widr0o?p=预览

请记住,ngMap不会替代Google Maps V3 API。

如果您还有其他问题,请告诉我。

以下是控制器的代码块。

// $scope.map .. this exists after the map is initialized
var markers = [];
for (var i=0; i<8 ; i++) {
  markers[i] = new google.maps.Marker({
    title: "Hi marker " + i
  })
}
$scope.GenerateMapMarkers = function() {
  $scope.date = Date(); // Just to show that we are updating

  var numMarkers = Math.floor(Math.random() * 4) + 4;  // betwween 4 & 8 of them
  for (i = 0; i < numMarkers; i++) {
    var lat =   1.280095 + (Math.random()/100);
    var lng = 103.850949 + (Math.random()/100);
    // You need to set markers according to google api instruction
    // you don't need to learn ngMap, but you need to learn google map api v3
    // https://developers.google.com/maps/documentation/javascript/marker
    var latlng = new google.maps.LatLng(lat, lng);
    markers[i].setPosition(latlng);
    markers[i].setMap($scope.map)
  }

  $timeout(function() {
    $scope.GenerateMapMarkers(); 
  }, 2000);  // update every 2 seconds
};

$scope.GenerateMapMarkers();


 类似资料:
  • 问题内容: 我有一个列表,可以使用ng- repeat进行迭代:用户可以使用上箭头和下箭头图标与列表项进行交互,单击它们后,我只需更改“列表”中元素的顺序”,这就是角度建议更改模型并自动将更改反映在视图中的原因。 moveUp中的逻辑:- 上面的代码完全可以正常工作,向下移动项目的逻辑与此类似。但是我要解决的问题是如何放置动画?我知道angular会自行处理绑定视图和模型的问题,但是当按下向下箭头

  • 问题内容: 我正在开发一个页面,我需要在其中显示一些框(使用),其中包含频道信息以及显示位置(城市)。 我面临的问题是当我重复第二遍时: 这应该获得第一个ng-repeat的$ index值,并使用显示频道的位置创建一个新数组。它确实做到了。但是,当我使用此数组应用第二个ng- repeat时,它无法正常工作。 说我的html看起来像这样(PS:我需要使用索引值而不是因为我将这些框放到列中) JS

  • 问题内容: 我是AngularJS的新手,正在用记号表构建仪表板。 试图将dygraphs网站上的示例代码放在ng-repeat- list中,以进行测试。对于y中的每个x,期望有相同的样本图。不幸的是,该图没有绘制,只是轴,控制台没有显示任何错误。 如果我删除ng-repeat,尽管可以(单个图形)工作- dygraphs代码有效。当然,像我在这里那样直接在视图中绘制图形没有任何意义,但我仍然想

  • 问题内容: 我正在使用angular.js和(出于参数考虑)引导程序。现在我需要遍历“事物”并将其显示在“行”中: 现在,我该如何用角度关闭每隔三点的div?我从angular-ui尝试过ui-if,但即使这样也没有成功。 如果要使用服务器端渲染,则可以执行以下操作(此处为JSP语法,但没有关系): 请注意,我实际上需要在这里更改DOM,而不仅仅是css隐藏元素。我尝试在和div 上重复,但无济于

  • 问题内容: 在此提琴中,AngularJS 不能与HTML5 Video元素一起使用:http : //jsfiddle.net/FsHah/5/ 看一下video元素,正在使用正确的src uri填充src标签,但是视频无法播放。 难道这不支持在AngularJS,究竟是什么解决办法? 问题答案: 只需创建一个过滤器: 在查看文件中:

  • 问题内容: 我想在ng-repeat中使用正则表达式。我尝试了以下代码,但无法正常工作。 我有用户数组,我只想显示类型为c5的用户。 如果我用 然后它也以“ ac5x”类型显示用户,因为它包含c5。 我怎么解决这个问题?也许还有另一种解决方案。 谢谢! 问题答案: Tosh提到的内容应该对您有用! 如果您发现自己想更频繁地使用正则表达式进行过滤,则可以创建一个自定义过滤器。像这样的小提琴使您可以指