javascript - Angular 谷歌地图

Question

您好，我目前正在处理 Angular Google map https://github.com/dylanfprice/angular-gm 我在设置边界和 map 中心时遇到困难

 <gm-map gm-map-id="'infoWindows'" gm-center="options.map.center"  gm-zoom="options.map.zoom" gm-bounds="bounds" gm-map-options="options.map" class="map">
            <gm-markers gm-objects="clinics"
                        gm-get-lat-lng="{ lat: object.practice.latitude, lng: object.practice.longitude }"
                        gm-get-marker-options="{ title: object.practice.name }"
                        gm-on-click="clk = object; infoWindow.open(marker.getMap(), marker);">
            </gm-markers>
          </gm-map>

Answer 1

确保您的 map 已经加载。

因此强烈推荐使用promises。

  var gmapPromise = angulargmContainer.getMapPromise('<mapId>');

  gmapPromise.then(function(gmap) {
    $scope.myGoogleMap = gmap;
  });

在您的情况下是“infoWindows”。

由于您的问题上下文较少，我无法真正回答您的特定代码有什么问题，但我会给您一些总是有用的片段:

$scope.updateGoogleMap = function(map, options) {
    // triggers a resize of the map and sets the correct center position
    // requires a google map object and a google maps mapOptions object
    $timeout(function(){
        google.maps.event.trigger(map, 'resize');
        map.setOptions(options);
    });
};

Google map mapOption 对象如下所示:

{
 center: new google.maps.LatLng(47.123, 10.123),
 zoom: 3,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}

由于 ng-hide/show 导致一些谷歌地图调整大小错误，你可能想在切换 View 时调用它。

**顺便说一下，如果您使用的是带有有效 google.maps.MapOptions 的 gm-map-options 标签，您不需要额外的“gm-bounds”、“gm-zoom”或“gm-center”参数