angular-google-maps，访问常规的Google Maps API

debugcn 发表于 Dev

罗汉·布希纳（RohanBüchner）

我一直在尝试谷歌地图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);
    });

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

例如。地图访问佣工，但它没有被绑定到该指令，并设定$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帮助器
让我设置中心和“绑定”坐标

so_jin_ee

如果您仅尝试更新中心，则可以使用以下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);
}

链接只需添加一个标记，并将标记的纬度/经度设置为其中心。希望这能给您一些想法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。