Question

我有一张卡片在页面中重复多次，在卡片中我有一张谷歌地图，显示特定点的位置。我正在接受谷歌方面的回复

Error

at new nc (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:47:499)
at Object._.oc (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:48:96)
at ah (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:98:420)
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:137:53
at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:21:5)
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:136:20
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:137:68

Html代码如下

<div class="body" ng-repeat="hospital in hospitals">
  <div class="list card">
    <div>
      <div id="map{{$index}}" style="height:200px;width:100%;" class="renderMap(hospital)"></div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=renderMap">

      </script>
    </div>
</div>
</div>

在控制器中，如下

$scope.renderMap = renderMap;
function renderMap(hospital){
   $scope.details_for_map = hospital;
   console.log($scope.details_for_map);
   initMap();
}

  function initMap() {

          var latlng = new google.maps.LatLng( $scope.details_for_map.geometry.location.lat, $scope.details_for_map.geometry.location.lng);
          var map = new google.maps.Map(document.getElementById('map'+$scope.details_for_map.index), {
            zoom: 4,
            center: latlng
          });
          var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Hello World!'
          });
        }

由于我是离子和角度js的新手，我无法弄清楚我做错了什么。请让我知道我能做些什么。

在ng重复中重复map div

0 个答案: