谷歌角度地图范围

Question

我正在做的事情是即时使用谷歌谷歌地图。 但是我不知道如何以适当的方式初始化它。

初始化时，我运行了一个在地图上绘制一些图的函数。 我关心的是我应该使用“ uiGmapIsReady.promise（）”还是“ uiGmapGoogleMapApi.then”。 当我使用“ uiGmapIsReady.promise”时，地图会加载得更平滑，但不会绘制任何图。 当我使用“ uiGmapGoogleMapApi.then”时，绘制了图，但是地图启动了3次，感觉很慢。 那么如何做到这一点的正确方法呢？

不要介意“ init”的双重使用，它仅用于演示。

码：

    $scope.map = { 
        center: { 
            latitude: 67.855800, 
            longitude: 20.225282 
        }, 
        zoom: 13,
        options: { 
            scrollwheel: false,
            disableDefaultUI: true,
            streetViewControl: false,
            backgroundColor: '#f2f2f2'
        }
    };

    uiGmapIsReady.promise().then(function(maps) {
        $scope.init();     
    });



    uiGmapGoogleMapApi.then(function(maps) {
        $scope.init(); 
    });


    $scope.init = function() {

        $scope.plots();     
    };

    $scope.plots = function() {
        MapService.plots().then(function(result) {
            //using a directive to draw plots.
        });
    };

这是服务：

export default function MapService() {
return ['$http', function($http) {

    this.plots = function() {
        return $http({
            url: '../json/plots.json',
            method: 'GET'
        });
    };
}];
}

Answer 1

总结一下：

• uiGmapGoogleMapApi 提供程序用于确定是否加载了Google Maps API
• uiGmapIsReady 服务用于确定地图实例是否在页面上呈现

基本上，如果您的json数据（例如google.maps.LanLng对象）中对Google Maps API没有任何依赖关系，则无需等到Googlr Maps API加载或呈现地图即可。 否则，我宁愿利用uiGmapGoogleMapApi进行数据加载和绑定。

例

 angular.module('map-example', ['uiGmapgoogle-maps']) .factory('MapService', function ($rootScope, $http) { var MapService = { plots: function () { return $http.get('https://rawgit.com/vgrem/d4b3e3c21149ebce3cd523036b02a72e/raw/data.json').then(function (response) { return response.data; }); } } return MapService; }) .controller('MapController', function ($scope, uiGmapIsReady,uiGmapGoogleMapApi, MapService) { $scope.markersData = []; $scope.map = { center: { latitude: -25.350480, longitude: 134.474842 }, zoom: 4, options: { scrollwheel: false, disableDefaultUI: true, streetViewControl: false, backgroundColor: '#f2f2f2' } }; //uiGmapIsReady.promise().then(function (maps) { //$scope.init(); //}); uiGmapGoogleMapApi.then(function (maps) { $scope.init(); }); $scope.init = function () { $scope.plots(); }; $scope.plots = function () { MapService.plots().then(function (result) { //console.log(result); $scope.markersData = result; }); }; }); 

 .angular-google-map-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } 

  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> <script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.11/dist/angular-google-maps.min.js"></script> <div ng-app="map-example" ng-controller="MapController"> <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"> <ui-gmap-markers models="markersData" coords="'self'" idkey="'id'"></ui-gmap-markers> </ui-gmap-google-map> </div> 

更新资料

该插件展示了如何从外部json数据初始化多边形（ ui-gmap-polygon指令）