функция не определена в html onclick и ng-click, а также ui-sref не срабатывает


1 принят

Для того, чтобы сделать кнопку кликабельным внутри google.maps.InfoWindow, contentсвойство должно быть скомпилированы с использованием $compileсервиса:

var content = '<button ng-click="cityDetail(' + idx + ')" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>';
var compiledContent = $compile(content)($scope)

google.maps.event.addListener(marker, 'click', function () {
    $scope.infowindow.setContent(compiledContent[0]);
    $scope.infowindow.open($scope.map, marker);
});

пример

angular.module('map-example', [])
    .controller('MapController', function ($scope, $rootScope, $compile) {
        function initialize() {
            $scope.map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: { lat: -38.363, lng: 131.044 }
            });

            $scope.cities = [
                { title: 'Sydney', lat: -33.873033, lng: 151.231397 },
                { title: 'Melbourne', lat: -37.812228, lng: 144.968355 }
            ];

            //create a single instance of Info  Window
            $scope.infowindow = new google.maps.InfoWindow({
                content: ''
            });
            //render markers
            for (var i = 0; i < $scope.cities.length; i++) {
                createMarkerOnMap(i);
            }
        }


        var createMarkerOnMap = function (idx) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng($scope.cities[idx].lat, $scope.cities[idx].lng),
                map: $scope.map,
                title: $scope.cities[idx].title
            });
            
            var content = '<button ng-click="cityDetail(' + idx + ')" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>';
            var compiledContent = $compile(content)($scope)

            google.maps.event.addListener(marker, 'click', function () {
                $scope.infowindow.setContent(compiledContent[0]);
                $scope.infowindow.open($scope.map, marker);
            });

        };

        $scope.cityDetail = function (index) {
            alert(JSON.stringify($scope.cities[index]));
        };

        google.maps.event.addDomListener(window, 'load', initialize);
    });
html, body {
        height: 400px;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 400px;
      }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="map-example" ng-controller="MapController"> 
    <div id="map"></div>   
</div>


0

Кажется, проблема связана с порядком аргументов. Первым параметром должен быть обработчик события

google.maps.event.addListener('click', hereComesTargetEvent, function() {
  infowindow.open($scope.map, marker);
});
JavaScript, angularjs, Google-карта, кнопка, угловато-щ-самозагрузка,

javascript,angularjs,google-maps,button,angular-ui-bootstrap,

1

Ответов: 2


1 принят

Для того, чтобы сделать кнопку кликабельным внутри google.maps.InfoWindow, contentсвойство должно быть скомпилированы с использованием $compileсервиса:

var content = '<button ng-click="cityDetail(' + idx + ')" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>';
var compiledContent = $compile(content)($scope)

google.maps.event.addListener(marker, 'click', function () {
    $scope.infowindow.setContent(compiledContent[0]);
    $scope.infowindow.open($scope.map, marker);
});

пример

angular.module('map-example', [])
    .controller('MapController', function ($scope, $rootScope, $compile) {
        function initialize() {
            $scope.map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: { lat: -38.363, lng: 131.044 }
            });

            $scope.cities = [
                { title: 'Sydney', lat: -33.873033, lng: 151.231397 },
                { title: 'Melbourne', lat: -37.812228, lng: 144.968355 }
            ];

            //create a single instance of Info  Window
            $scope.infowindow = new google.maps.InfoWindow({
                content: ''
            });
            //render markers
            for (var i = 0; i < $scope.cities.length; i++) {
                createMarkerOnMap(i);
            }
        }


        var createMarkerOnMap = function (idx) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng($scope.cities[idx].lat, $scope.cities[idx].lng),
                map: $scope.map,
                title: $scope.cities[idx].title
            });
            
            var content = '<button ng-click="cityDetail(' + idx + ')" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>';
            var compiledContent = $compile(content)($scope)

            google.maps.event.addListener(marker, 'click', function () {
                $scope.infowindow.setContent(compiledContent[0]);
                $scope.infowindow.open($scope.map, marker);
            });

        };

        $scope.cityDetail = function (index) {
            alert(JSON.stringify($scope.cities[index]));
        };

        google.maps.event.addDomListener(window, 'load', initialize);
    });
html, body {
        height: 400px;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 400px;
      }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="map-example" ng-controller="MapController"> 
    <div id="map"></div>   
</div>


0

Кажется, проблема связана с порядком аргументов. Первым параметром должен быть обработчик события

google.maps.event.addListener('click', hereComesTargetEvent, function() {
  infowindow.open($scope.map, marker);
});
JavaScript, angularjs, Google-карта, кнопка, угловато-щ-самозагрузка,
Похожие вопросы