angular-google-地图，访问常规 google 地图 API

Question

我一直在尝试 angular implementation of the google maps API 并且一直在努力弄清楚如何访问任何常规 API 助手。

我的问题最初是因为我想根据我的标记以编程方式将地图居中。 事实证明这很奇怪，我似乎遗漏了一些小东西，或者我误解了如何使用此指令创建新地图

我的理解是，我需要通过uiGmapIsReady方法访问google API：

  uiGmapIsReady.promise()
      .then(function(instances) {
        // simplified for one map
        return instances[0].map;
      })
      .then(function(map) {
        // here is have access to utility functions like like"map.getCenter()" via map
        console.log(map);
    });

问题是，上面是一个单独的实例，与我创建并绑定到视图的原始地图对象相反。（如果有道理）

EG。 map 可以访问助手，但它不受指令约束，并且设置 $scope.map = map、_.merge($scope.map, map) 或其他变体不起作用（/ 感觉不对，感觉很老套）

控制器代码：

    //Hide map until ready
    $scope.loadingIsDone = false;
    $scope.markers = [];     

    // map wont work without these "hard-coded" values
    $scope.map = {
      center: {
        latitude: 40,
        longitude: 13.37
      },
      zoom: 10
    };  

    uiGmapIsReady.promise()
      .then(function(instances) {
        return instances[0].map;
      })
      .then(function(map) {

         // id like to set the center and bounds based on markers
         // assuming it must happen here?

         uiGmapGoogleMapApi.then(function(googleMaps) { 

            googleMaps.event.addDomListener(window, "resize", function() {
                var center =  map.getCenter();               
                googleMaps.event.trigger(map, "resize");
                map.setCenter(center); 
            }); 
        });
    });

    // get my data
    uiGmapGoogleMapApi.then(function(maps) {   

        someAPI.logIn.then(function(token) {        
            // supply token to get future request
            someAPI.getOffers(token).then(function(res) {  
                var markers = [];

                //convert data points to markers
                angular.forEach(res.data, function(value, key) {
                    markers.push(coordinate.MakeMarker(value));
                });

                // apply marker collection to scope object, and unhide map
                $scope.markers = markers;
                $scope.loadingIsDone = true;                  
            }); 
        });
    });

查看

   <div ng-if="loadingIsDone" class="animate-if map-container">       
       <div id="map_canvas">
           <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" bounds="map.bounds"> 
              <ui-gmap-markers models="markers" coords="'self'" icon="'icon'"> </ui-gmap-markers> 
           </ui-gmap-google-map>
       </div>
  </div>

总结

如何以正确的方式创建新的地图实例 EG... $scope.map =
... 允许通过绑定对象访问普通 (Google) API 帮助程序
允许我设置中心和 "bound" 协调坐标

Answer 1

如果你只是想更新你的中心，也许你可以使用以下jsfiddle中的代码，具体如下：

this.addMarker = function(res) {
    if(this.marker) this.marker.setMap(null);
    this.marker = new google.maps.Marker({
        map: this.map,
        position: res.geometry.location,
        animation: google.maps.Animation.DROP
    });
    this.map.setCenter(res.geometry.location);
}

Link 这只是添加一个标记并将标记的 lat/long 设置为中心。希望这能给你一些想法。

angular-google-地图，访问常规 google 地图 API

angular-google-maps, access to regular google maps API

google-maps

google-maps-api-3

angularjs

angular-google-maps