0

这是我试图显示代码的角度 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 的网络选项卡中看到正在下载的地图图像，但是地图没有显示。

4

1 回答 1

0

你能检查 url @ https://github.com/angular-ui/ui-map和谷歌地图的 Angular UI 实现吗

该指令允许您在 angularJS 中添加 Google Maps JavaScript API 元素

于 2013-09-03T10:59:56.200 回答