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と Google マップの Angular UI 実装を確認できますか

このディレクティブを使用すると、angularJS に Google Maps JavaScript API 要素を追加できます

于 2013-09-03T10:59:56.200 に答える