Question

这是我的角度js指令，我试图通过它来显示代码：

"use strict";
app.directive('geomap', function () {
    return {
        restrict:'E',
        link:function (scope, elem, attrs) {
            scope.$watch(attrs.ngModel, function (v) {
                var geoBoardlocation = v;
                if (v != undefined) {
                    var ICON = new google.maps.MarkerImage('medicare.png', null, null,
                        new google.maps.Point(14, 13));

                    var SHADOW = new google.maps.MarkerImage('medicare-shadow.png', null, null,
                        new google.maps.Point(14, 13));

                    google.maps.event.addDomListener(window, 'load', function () {
                        var map = new google.maps.Map(document.getElementById('map-canvas'), {
                            center:new google.maps.LatLng(37.7, -122.2),
                            zoom:4,
                            streetViewControl:true,
                            mapTypeId:google.maps.MapTypeId.ROADMAP
                        });

                        var panelDiv = document.getElementById('panel');

                        var data = new MedicareDataSource(geoBoardlocation);

                        var view = new storeLocator.View(map, data, {
                            geolocation:false,
                            features:data.getFeatures()
                        });

                        view.createMarker = function (store) {
                            console.log(store.getDetails());
                            var markerOptions = {
                                position:store.getLocation(),
                                icon:'medicare.png',
                                shadow:'medicare-shadow.png',
                                title:store.getDetails().title
                            };
                            return new google.maps.Marker(markerOptions);
                        }

                        var infoBubble = new InfoBubble;
                        view.getInfoWindow = function (store) {

                            if (!store) {
                                return infoBubble;
                            }
                            var details = store.getDetails();

                            var html = ['<div class="store"><div class="title">', details.title,
                                '</div><div class="address">', details.address, '</div>',
                                '<div class="hours misc">', details.hours, '</div></div>'].join('');

                            infoBubble.setContent($(html)[0]);
                            return infoBubble;
                        };

                        new storeLocator.Panel(panelDiv, {
                            view: view,
                            directions: false,                                
                        });
                    });
                }

            });
        }

    };
});

但是使用此地图不会显示。知道为什么会这样吗？我可以在Chrome的“网络”标签中看到地图图片，但是地图没有显示。

Answer 1

您可以查看网址@ https://github.com/angular-ui/ui-map和Google地图的Angular UI实施

此指令允许您在angularJS

中添加Google Maps JavaScript API元素

谷歌地图没有显示使用AngularJS，但正在下载图像

1 个答案: