angularjs – 使用angular-google-maps设置Google Maps边界

前端之家收集整理的这篇文章主要介绍了angularjs – 使用angular-google-maps设置Google Maps边界前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将界限设置为Google Maps实例,但没有成功.我正在使用AngularJS和angular-google-maps模块.我的最后一次尝试是:

<div id="map_canvas">
    <ui-gmap-google-map 
        center="map.center" 
        zoom="map.zoom"
        bounds="map.bounds"
        options="options">

        <div ng-repeat="d in devicesMarkers track by d.id">

            <ui-gmap-marker
                idkey="d.id"
                coords="d.center"
                options="d.options">
            </ui-gmap-marker>
            <ui-gmap-circle
                center="d.center"
                stroke="d.circle.stroke"
                fill="d.circle.fill"
                radius="d.circle.radius"
                visible="d.options.visible">
            </ui-gmap-circle>

        </div>

    </ui-gmap-google-map>
</div>

在我的app.js中,我写道:

(...)
.controller('TaihMapController',['$scope','$log','uiGmapGoogleMapApi',function($scope,$log,GoogleMapApi) {
    $scope.devicesMarkers = devices;
    $scope.map = {
        center: { latitude: devices[0].center.latitude,longitude: devices[0].center.longitude },zoom: 12,bounds: {}
        // fit: true,};
    GoogleMapApi.then(function(maps) {
        $log.debug(maps);
        var myBounds = new maps.LatLngBounds();
        for (var k = 0; k < devices.length; k++) {
            var _tmp_position = new maps.LatLng(
                devices[k].center.latitude,devices[k].center.longitude);
            myBounds.extend(_tmp_position);
        }
    $scope.map.bounds = myBounds;
    $scope.googleVersion = maps.version;
    // $scope.bounds = myBounds;
    // $scope.zoom = maps.getZoom();
    // maps.fitBounds(myBounds);
    // $scope.bounds = maps.getBounds();

});

函数maps.fitBounds()不存在.我尝试了$scope.map.bounds方法,但没有按照我的想法做出反应.

解决方法

如果你正在使用angular-google-map的“markers”指令,只需添加fit =“true”属性(ui-gmap-markers).

示例:

< ui-gmap-google-map center =“map.center”zoom =“map.zoom”options =“map.options”>
    < ui-gmap-markers fit =“true”models =“markers”coords =“'self'”>< / ui-gmap-markers>
< / UI-GMAP-谷歌地图>

资源:
https://stackoverflow.com/a/29707965

猜你在找的Angularjs相关文章