我想在我的页面上显示每个地方（位置）的google maps。在我的HTML页面中，我具有google maps的功能。
<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>
那么是否可以像我一样使用参数来调用函数，或者还有其他方法吗？
您的代码有几个问题。从技术上讲，可以像尝试的那样混合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行单独的容器中渲染地图，因此每个容器都有id map_canvas。同时，您在库onload事件中initialize再次调用该事件。
google.maps.event.addDomListener(window, 'load', initialize);
3。话虽这么说，您不应该使用如此不成功的设计来构建应用程序。您应该真正地理解AngularJS的主要概念和理念。
在您的情况下，您应该使用ng-click代替onclick，initialize在某种定制服务中定义，也许编写定制指令以在适当的容器中处理每个单独的地图呈现。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句