infowindow中的按鈕angularjs

Question

在我的地圖中，我用標記標記了幾個地方。如果我點擊某個標記，則會打開一個infowindow，其中顯示了該地點的名稱和一個按鈕。我需要編寫一個函數，當單擊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); 
     } 

當我運行的代碼和標記單擊它拋出一個錯誤

Unhandled exception at line 31, column 318 in http://ajax.googleapis.com ajax/libs/angularjs/1.5.8/angular.min.js

0x800a139e - JavaScript runtime error: [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>'; 

演示

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>

Answer 2

自調用看起來非常可疑..

而且由於標記已經在循環範圍內，我認爲沒有必要對p UT斯達康將其作爲參數

你能嘗試像簡單：

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