javascript - Angular 指令 : How to change infoWindow HTML content 中的 Google map

Question

我正在为 Google map 开发 AngularJs 指令。看到这个 plunker:https://plnkr.co/edit/cRdiu6QkZsnDoZBRM1sJ?p=preview

还附有指令代码:

app.directive('boatsMap', function () {

    function link(scope, element, attrs) {

        var cars = [{
                id : 1,
                price : 100,
                latitude : 39.65,
                longitude : 3.0175
            }, {
                id : 2,
                price : 200,
                latitude : 39.67,
                longitude : 3.0173
            }
        ];

        console.log("Is running the directive");
        var map;
        var index = 0;
        var zoom = 8;
        var geocoder = new google.maps.Geocoder();

        // Zoom is got from attributes, otherwise by default
        if (attrs.zoom) {
            zoom = attrs.zoom;
        }

        // Map center is calculated according to coordinates, otherwise is calculated accordint to location
        if (attrs.latitude && attrs.longitude) {
            var center = {
                lat : parseFloat(attrs.latitude),
                lng : parseFloat(attrs.longitude)
            };
            createMap(center, zoom);
        } else if (attrs.location != undefined) {
            geocoder.geocode({
                'address' : attrs.location
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var location = results[0].geometry.location;
                    var center = new google.maps.LatLng(location.lat(), location.lng());
                    createMap(center, zoom);
                }
            });
        }

        function createMap(center, zoom) {

            var mapOptions = {
                center : center,
                zoom : parseInt(zoom),
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                mapTypeControl : false,
                scaleControl : false,
                streetViewControl : false,
                rotateControl : false,
                fullscreenControl : false
            };
            map = new google.maps.Map(element[0], mapOptions);

            if (cars.length > 0) {
                console.log("New car!");
                for (var i = 0; i < 1; i++) {
                    var location = {
                        lat : parseFloat(cars[i].latitude),
                        lng : parseFloat(cars[i].longitude)
                    };
                    console.log("location.lat=" + location.lat);
                    console.log("location.lng=" + location.lng);
                    var content = '<div>'
                         + cars[i].price + "€"
                         + '</div>';
                    console.log("content=" + content);
                    var infoWindow = new google.maps.InfoWindow({
                            content : content,
                            position : location
                        });
                    google.maps.event.addListener(infoWindow, 'domready', function () {
                        var iwContent = document.querySelector('.gm-style-iw');
                        iwContent.parentNode.removeChild(iwContent.nextElementSibling);
                        iwContent.style.setProperty('width', 'auto', 'important');
                        iwContent.style.setProperty('right', iwContent.style.left, 'important');
                        iwContent.style.setProperty('text-align', 'center', 'important');
                        iwContent.style.setProperty('font-weight', '600');
                        iwContent.style.setProperty('color', '#777');
                    });
                    infoWindow.open(map);

                }
            }
        }
    };

    return {
        restrict : 'E',
        replace : true,
        template : '<div></div>',
        link : link
    };
});

我想要做的是，当用户点击带有价格的信息窗口时，内容应该更改为另一个 html 内容(与 Airbnb 的效果相同)。我知道这个 GM infoWindow 对象没有 onclick 事件，所以我想它必须以某种方式用 Jquery 完成(我不太了解 jquery)。

我的第二个问题是是否有一种“Angular 方式”可以做到这一点？

一个例子或我的 plunker 更新将不胜感激。

Answer 1

变化列表:

1) $compile service需要注入(inject)指令:

app.directive('boatsMap', [ '$compile', function($compile) {

     function link(scope, element, attrs) {
         //.. 
     }          


     return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: link,
        controller: function($scope, $element){

       }
    };
}]);

2) 添加需要从信息窗口触发的事件处理程序，例如:

function link(scope, element, attrs) { 
   scope.showDetails = function(){
       //...
    }
}

3) Angular 要知道信息窗口的内容，需要使用 $compile 服务编译它以触发像 ng-click 这样的事件，例如:

var content = '<button ng-click="showDetails()">Show details</button>';  
var compiledContent = $compile(content)(scope);

var infoWindow = new google.maps.InfoWindow({
    content:   compiledContent[0],
    position: location
});

已修改 plunker

更新

无法像这样注册信息窗口的

click 事件:

  google.maps.event.addDomListener(infoWindow, 'click', function () {
    alert("Clicked in the infowindow!");
  });

相反，您可以考虑以下解决方案。

像这样初始化信息窗口内容:

var content = '<div ng-click=showDetails()>{{infoWindowText}} €</div>';

在哪里

infoWindowText scope 变量引入:

scope.infoWindowText = cars[0].price;

信息窗口的内容可以这样更新:

 scope.showDetails = function(){
       scope.infoWindowText = cars[1].price;
 }

Plunker

更新(2018 年 1 月 21 日)

Plunker演示如何:

• 为动态 html 模板绑定(bind) AngularJs 事件处理程序，以防万一信息窗口
• 为信息窗口指定 html 内容