Question

我正在学习角度，我想在角度局部中包含一张地图。正如我所做的那样，它会加载部分，但只有在你重新加载页面时才会加载。

google地图脚本+ API密钥包含在index.html

中

此时脚本在部分

中被包含在内

<!-- map -->
<div id="map" class="col-lg-12">
<script type="text/javascript" src="js/map.js"></script>
</div>
<!-- /map -->

我的页面控制器是空的，据我所知，我不得不在这里调用它

app.controller('PageCtrl', function (/* $scope, $location, $http */) {
  console.log("Page Controller ready");

});

map.js：

   function init() {
    var e = {
            zoom: 8,
            center: new google.maps.LatLng(12.00, 12.00),
            styles: [{
                featureType: "all",
                elementType: "all",
                stylers: [{
                    visibility: "on"
                }]
            }, {
                featureType: "all",
                elementType: "labels",
                stylers: [{
                    visibility: "off"
                }, {
                    saturation: "-100"
                }]
            }, {
                featureType: "all",
                elementType: "labels.text.fill",
                stylers: [{
                    saturation: 36
                }, {
                    color: "#000000"
                }, {
                    lightness: 40
                }, {
                    visibility: "off"
                }]
            }, {
                featureType: "all",
                elementType: "labels.text.stroke",
                stylers: [{
                    visibility: "off"
                }, {
                    color: "#000000"
                }, {
                    lightness: 16
                }]
            }, {
                featureType: "all",
                elementType: "labels.icon",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "administrative",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 20
                }]
            }, {
                featureType: "administrative",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 17
                }, {
                    weight: 1.2
                }]
            }, {
                featureType: "landscape",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 20
                }]
            }, {
                featureType: "landscape",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "landscape",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "landscape.natural",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "poi",
                elementType: "geometry",
                stylers: [{
                    lightness: 21
                }]
            }, {
                featureType: "poi",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "poi",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "road",
                elementType: "geometry",
                stylers: [{
                    visibility: "on"
                }, {
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.highway",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }, {
                    lightness: 17
                }]
            }, {
                featureType: "road.highway",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#7f8d89"
                }, {
                    lightness: 29
                }, {
                    weight: .2
                }]
            }, {
                featureType: "road.arterial",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 18
                }]
            }, {
                featureType: "road.arterial",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.arterial",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.local",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 16
                }]
            }, {
                featureType: "road.local",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.local",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "transit",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 19
                }]
            }, {
                featureType: "water",
                elementType: "all",
                stylers: [{
                    color: "#2b3638"
                }, {
                    visibility: "on"
                }]
            }, {
                featureType: "water",
                elementType: "geometry",
                stylers: [{
                    color: "#2b3638"
                }, {
                    lightness: 17
                }]
            }, {
                featureType: "water",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#24282b"
                }]
            }, {
                featureType: "water",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#24282b"
                }]
            }, {
                featureType: "water",
                elementType: "labels",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.text",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.text.fill",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.text.stroke",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.icon",
                stylers: [{
                    visibility: "off"
                }]
            }]
        },
        t = document.getElementById("map"),
        l = new google.maps.Map(t, e);
    new google.maps.Marker({
        position: new google.maps.LatLng(48.84, 12.95),
        map: l,
        title: "Snazzy!"
    })
}
google.maps.event.addDomListener(window, "load", init);

我的猜测是部分

google.maps.event.addDomListener(window, "load", init);

必须在控制器中发生，但我无法使其工作。

Answer 1

如果您需要重新加载页面以使其工作，则意味着实例化地图所需的任何内容（即new google.maps.Map()）尚未准备就绪。另外，看起来你有另一个用于地图初始化的脚本，如果你计划将这个实现放在你将重用地图的地方，它们都应该在你的控制器或指令中。

如果我想同步加载地图（与非阻塞的异步相比性能较慢）我将其设置为：

<强> partial.html

  <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script src="app.module.js"></script>
    <script src="synchronous.controller.js"></script>
  </head>

  <body ng-app="app">
    <div id="view" ng-controller="SynchronousController as vm">
      <h1>{{vm.title}}</h1>
      <div id="map"></div>
    </div>
  </body>

<强> sychronous.controller.js

function SynchronousController() {
    var vm = this;
    vm.title = 'Loading map synchronously';
    vm.initMap = initMap;

    // manually call your initMap function
    vm.initMap();

    function initMap() {
      vm.map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: -34.397,
          lng: 150.644
        },
        zoom: 8
      });
    }
  }

我已经创建了一些关于如何：

的工作示例

他们都遵循John Papa on Angular 1.X

之前的一些现有最佳做法

请务必使用您自己的API密钥

如果您还有兴趣了解如何将地图制作成可在任何部分中重复使用的指令，则a good example。

希望有所帮助！

在角度部分

1 个答案: