信息窗口angularjs中的按钮

Button in infowindow angularjs

本文关键字：按钮 angularjs 信息窗 窗口 信息      更新时间：2023-09-26

在我的地图上，我用记号笔标记了几个地方。如果我点击一个标记，就会打开一个信息窗口，"告诉"这个地方的名称和其中的一个按钮。当我点击信息窗口中的按钮时，我需要编写一个函数来将这些地方添加到数组中。

我的代码低于

$scope.routes = [];
locations = data;
$scope.map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: new google.maps.LatLng(12.9716, 77.5946),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
$scope.infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    icon: {
      url: 'img/map-marker.png',
      scaledSize: new google.maps.Size(25, 25)
    },
    position: new google.maps.LatLng(locations[i].Latitude, locations[i].Longitude),
    map: $scope.map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(''' + locations[i].Name + ''');">Add</button>';
      var content = $compile(content1)($scope);
      $scope.infowindow.setContent(content[0]);
      $scope.infowindow.open($scope.map, marker);
    }
  })(marker, i));
}
$scope.AddLoc = function(x) {
  $scope.routes.push(x);
  alert($scope.routes);
}

当我运行代码并点击标记时，它会抛出一个错误

中第31行第318列出现未处理的异常http://ajax.googleapis.comajax/libs/angularjs/1.5.8/angular.min.js

0x800a139e-JavaScript运行时错误：[jqLite:nosel]http://errors.angularjs.org/1.5.8/jqLite/nosel

请帮助我

根据angular.js源代码，compile函数构造jqLite元素，在HTML字符串的情况下，如果用标签包装，则该元素被视为有效：

if (argIsString && element.charAt(0) !== '<') {
  throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
}

总之，如果HTML字符串以以下格式abc:表示，则编译失败

var t = $compile("abc")($scope);  //fails

一旦用标签包装，例如<div>abc</div>，编译成功：

var t = $compile("<div>abc</div>")($scope);  //succeed

解决方案

将工具提示HTML内容包裹在容器div元素周围。

更换线路：

var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc('''+locations[i].Name+''');">Add</button>';

带有

var content1 = '<div>' + locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc('''+locations[i].Name+''');">Add</button>' + '</div>';

演示

angular.module('mapApp', [])
  .controller('mapCtrl', function($scope, $rootScope, $compile) {
    $scope.routes = [];
    $scope.locations = [{
        Name: 'Sydney',
        Latitude: -33.873033,
        Longitude: 151.231397
      },
      {
        Name: 'Melbourne',
        Latitude: -37.812228,
        Longitude: 144.968355
      }
    ];
    $scope.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: new google.maps.LatLng(-38.363, 131.044),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    $scope.infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < $scope.locations.length; i++) {
      marker = new google.maps.Marker({
        //icon: { url: 'img/map-marker.png', scaledSize: new google.maps.Size(25, 25) },
        position: new google.maps.LatLng($scope.locations[i].Latitude, $scope.locations[i].Longitude),
        map: $scope.map
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var tooltipHtml = '<div>' + $scope.locations[i].Name + '<button class="btn btn-success" ng-click="addLoc(''' + $scope.locations[i].Name + ''');">Add</button>' + '</div>';
          var elTooltip = $compile(tooltipHtml)($scope);
          $scope.infowindow.setContent(elTooltip[0]);
          $scope.infowindow.open($scope.map, marker);
        }
      })(marker, i));
    }
    $scope.addLoc = function(x) {
      $scope.routes.push(x);
    };
  });
html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}
#map {
  height: 400px;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<div ng-app="mapApp" ng-controller="mapCtrl">
  <pre style="width: 30%; height: 400px; overflow-y: scroll; float:left;">
       {{routes | json}} 
    </pre>
  <div id="map" style="float:left; width:60%;"></div>
</div>

自我调用看起来很可疑。。。

由于标记已经在循环范围内，我认为没有必要将其作为参数

你能尝试更简单的方法吗？比如：

google.maps.event.addListener(marker, 'click', function(i) { 
  var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc('''+locations[i].Name+''');">Add</button>';
  var content = $compile(content1)($scope);
  $scope.infowindow.setContent(content[0]);
  $scope.infowindow.open($scope.map, marker);
});
相关文章：