Question

我正在使用标记来填充Google地图实例，这些标记的信息窗口包含一个按钮，该按钮应链接到我的应用中的页面，其中包含有关所述标记的更多信息。我有一个单独的视图上的相同按钮，我直接复制它，但我认为这是一个范围的问题。

使用代码更新：

var content = '<a ng-click="changeView(\'list\')" ui-sref="productDetail({id:\'' + $scope.products.items[x]._id + '\', slug:\'' + $scope.products.items[x].slug + '\'})" class="btn btn-default">View details</a>';

google.maps.event.addListener(marker, 'click', (function(marker,content,infowindow){
  return function() {
    infowindow.setContent(content);
    infowindow.open(map,marker);
  };
})(marker,content,$rootScope.infowindow));

Answer 1

由于信息窗口是动态生成的，因此需要使用$compile service：

进行编译

var content = '<a ng-click="changeView(\'list\')" ui-sref="productDetail({id:\'' + $scope.products.items[x]._id + '\', slug:\'' + $scope.products.items[x].slug + '\'})" class="btn btn-default">View details</a>';
var compiledContent = $compile(content)($scope);

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

工作示例

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: -34.363, lng: 131.044 }
            });



            $scope.products = {
                items: [
                    { _id: 1, slug: '', lat: -33.873033, lng: 151.231397 },
                    { _id: 2, slug: '', lat: -37.812228, lng: 144.968355 }
                ]
            };


            $rootScope.infowindow = new google.maps.InfoWindow({
                content: ''
            });


            for (var x = 0; x < $scope.products.items.length; x++) {


                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng($scope.products.items[x].lat, $scope.products.items[x].lng),
                    map: $scope.map,
                    title: 'Uluru (Ayers Rock)'
                });

                var content = '<a ng-click="changeView(\'list\')" ui-sref="productDetail({id:\'' + $scope.products.items[x]._id + '\', slug:\'' + $scope.products.items[x].slug + '\'})" class="btn btn-default">View details</a>';
                var compiledContent = $compile(content)($scope)

                google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
                    return function() {
                        infowindow.setContent(content);
                        infowindow.open($scope.map, marker);
                    };
                })(marker, compiledContent[0], $rootScope.infowindow));

            }

        }

        $scope.changeView = function(name) {
            alert(name);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    });

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>
<div ng-app="map-example" ng-controller="MapController">
    <div id="map"></div>
</div>

<强>更新

如果是多个html元素，您可以考虑以下解决方案：

在容器元素中包装元素
编译容器元素

实施例

var content = '<h2>Info</h2><a ng-click="changeView(\'list\')" ui-sref="productDetail({id:\'' + $scope.products.items[x]._id + '\', slug:\'' + $scope.products.items[x].slug + '\'})" class="btn btn-default">View details</a>';

google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
      return function () {
        var contentDiv = angular.element('<div/>');
        contentDiv.append(content);
        var compiledContent = $compile(contentDiv)($scope);

        infowindow.setContent(compiledContent[0]);
        infowindow.open($scope.map, marker);
      };
 })(marker, content, $rootScope.infowindow));

Plunker

Answer 2

没有看到您的代码，我会尝试这里。我会使用谷歌地图addListener来改变位置

google.maps.event.addListener(marker, 'click', function() {}); api

所以半个例子就是

 app.controller('mapController', ['$scope', '$location' function ($scope,  $location) {

       var myLatLng =  {lat: -25.363, lng: 131.044};

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: myLatLng
                });

var marker = {position: mylatLng, map:map, title:"test",id:1};

google.maps.event.addListener(marker, 'click', function() {$location.path('myNewPath')});`
});

修改

WHOOPS你想要UI路由器。快速修复

app.controller('mapController', ['$scope', ''$state'' function ($scope, $state) { var myLatLng = {lat: -25.363, lng: 131.044}; map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: myLatLng }); var marker = {position: mylatLng, map:map, title:"test",id:1}; google.maps.event.addListener(marker, 'click', function() { $state.go('myNewState'});` });

如何使用Google地图标记内的UI路由器更改状态？

2 个答案: