Question

在我的地图中，我使用标记标记了几个地方。如果我点击一个标记，就会打开一个告知该地点名称和一个按钮的信息。我需要编写一个函数，在单击infowindow中的按钮时将位置添加到数组中。

我的代码在

下面

$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);
}

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

http://ajax.googleapis.com ajax / libs / angularjs / 1.5.8 / angular.min.js第31行第31行未处理的异常

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

请帮帮我

Answer 1

根据angular.js源代码compile function构造jqLite element，如果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

<强>解决方案

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

替换行：

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>';

<强>演示

＆＃13;

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);
    };
  });

＆＃13;

html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}

#map {
  height: 400px;
}

＆＃13;

<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>

＆＃13;

Answer 2

自我呼唤看起来非常可疑......

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

你可以尝试更简单：

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);
});

infowindow angularjs中的按钮

2 个答案: