Question

我想在我的页面中为每个地方（lieux）显示谷歌地图。在我的HTML页面中，我有谷歌地图的功能。

<script> 
  function initialize(long,lat) {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(long, lat),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
   document.getElementById('map_canvas').style.display='block'; 
</script>

我有按钮显示地图。

 <div class="tab-pane" id="tab_b" ng-controller="LieuController as lieu">
       <div  class="list-group-item" ng-repeat="lieu in lieu.lieux ">
  <button onclick="initialize({{lieu.x}},{{lieu.y}})">Click me</button> 
    <div id="map_canvas"></div>
 </div>

那么可以使用像我这样的参数调用函数，还是有其他方法？

Answer 1

您的代码存在一些问题。从技术上讲，可以像你正在尝试的那样混合Angular和纯javascript DOM 0事件。然而..

<强> 1 即可。如果您已经尝试过自己的代码，那么在这种情况下您应该看到Angular抛出的错误：

不允许使用HTML DOM事件属性的插值。

这有效地防止了使用Angular世界代码之外的Angular范围数据。你可以采取一种解决方法。您可以在某些属性中呈现必要的数据，然后使用它们。例如：

<button onclick="initialize(this.getAttribute('data-x'), this.getAttribute('data-y'))" 
        data-x="{{l.x}}" data-y="{{l.y}}">Click me</button>

<强> 2 即可。事件，如果您修复上述问题，您仍然需要解决重复的ID问题。由于您的initialize函数应该在每个ngRepeat行的不同容器中呈现一个地图，每个容器的标识为map_canvas。同时你的库onload事件再次调用initialize。

google.maps.event.addDomListener(window, 'load', initialize);

第3 即可。话虽这么说，你不应该用这样一个不成功的设计构建一个应用程序。您应该真正了解主要的AngularJS概念和哲学。

在您的情况下，您应该使用ng-click而不是onclick，在某种自定义服务中定义initialize，也可以编写自定义指令来处理每个单独的地图呈现容器

在javascript调用函数参数中使用Angular

1 个答案: