將Google Maps API與AngularJS一起使用，地圖不會顯示在中心

我在angularJS中使用Google Maps API。我在地圖上有多個位置。現在我試圖在地圖中心查看標記，但不知道我在哪裏缺乏重點。將Google Maps API與AngularJS一起使用，地圖不會顯示在中心

下面是代碼：

$scope.mapOptions = { 
    zoom: 2, 
    center: new google.maps.LatLng(29.3139962480007,47.9858316415248), 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
    styles:$scope.styles 
} 

$scope.map = new google.maps.Map(document.getElementById('modelmap'), $scope.mapOptions); 
var infoWindow = new google.maps.InfoWindow(); 
$scope.markers = []; 
$scope.infowindow = new google.maps.InfoWindow({ 
    content: '', 
    maxWidth: 250 
}); 
var createMarker = function (info){ 

    var marker = new google.maps.Marker({ 
    map: $scope.map, 
    position: new google.maps.LatLng(info.latitude, info.longitude), 
    title: info.address, 
    icon: '/assets/Maps-Pin-Place-icon.png' 
    }); 

    var content=' <div class="wwone__map-infobox__inner scrollFix"> <img class="wwone__map-infobox__thumb" src="'+images+'"/> <div class="wwone__map-infobox__inner__heading">'+title+'</div><div class="wwone__map-infobox__inner__info">'+description+'<div class="wwone__map-infobox__inner__info__location"><strong>Address:</strong>'+info.address+'</div></div><a class="wwone__map-infobox__inner__btn btn" data-toggle="modal" data-target="#myModal" ng-click="openBrnach('+info.id+')">Find out more</a></div> ' 

    var compiledContent = $compile(content)($scope) 

    google.maps.event.addListener(marker, 'click', (function(marker, content, scope) { 
    return function() { 
     scope.infowindow.setContent(content); 
     scope.infowindow.open(scope.map, marker); 
    }; 
    })(marker, compiledContent[0], $scope)); 


    $scope.markers.push(marker); 
} 
for (i = 0; i < data.length; i++){ 
    createMarker(data[i]); 
}

請幫幫忙！

來源

2017-05-26 Priyadarshani mini

當您點擊標記時，您是否希望將地圖居中？或者當你繪製所有的標記時，你是否期望地圖居中，這樣你就可以看到它們了？ – duncan

Hi Ducan，我想讓地圖居中，這樣我們就可以看到它們全部 –

您需要的是有一個LatLngBounds對象。在添加每個標記時，請使用該標記的位置來擴展邊界。添加完所有標記後，請在地圖上調用fitBounds。 – duncan

看來你正在尋找一個fitBounds function設置視口，下面的例子說明如何中心和縮放地圖，使所有標記越來越明顯：

var bounds = new google.maps.LatLngBounds(); 
for (var i = 0; i < $scope.cities.length; i++) { 
    var marker = createMarker(i); 
    bounds.extend(marker.getPosition()); 
    } 
    $scope.map.fitBounds(bounds);

例

angular.module('map-example', []) 
 
    .controller('MapController', function ($scope, $rootScope, $compile) { 
 
    function initialize() { 
 
     $scope.map = new google.maps.Map(document.getElementById('map'), { 
 
     //zoom: 4, 
 
     //center: { lat: -38.363, lng: 131.044 } 
 
     }); 
 

 
     $scope.cities = [ 
 
     { title: 'Sydney', lat: -33.873033, lng: 151.231397 }, 
 
     { title: 'Melbourne', lat: -37.812228, lng: 144.968355 }, 
 
     {title: 'Perth', lat: -31.9546855,lng: 115.8350292}, 
 
     {title: 'Adelaide', lat: -34.9256374,lng: 138.583259} 
 
     ]; 
 

 
     //create a single instance of Info Window 
 
     $scope.infowindow = new google.maps.InfoWindow({ 
 
     content: '' 
 
     }); 
 
     //render markers 
 
     var bounds = new google.maps.LatLngBounds(); 
 
     for (var i = 0; i < $scope.cities.length; i++) { 
 
     var marker = createMarker(i); 
 
     bounds.extend(marker.getPosition()); 
 
     } 
 
     $scope.map.fitBounds(bounds); 
 
    } 
 

 

 
    var createMarker = function (idx) { 
 
     var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng($scope.cities[idx].lat, $scope.cities[idx].lng), 
 
     map: $scope.map, 
 
     title: $scope.cities[idx].title 
 
     }); 
 

 
     var content = '<button ng-click="showDetails(' + idx + ')" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>'; 
 
     var compiledContent = $compile(content)($scope) 
 

 
     google.maps.event.addListener(marker, 'click', function() { 
 
     $scope.infowindow.setContent(compiledContent[0]); 
 
     $scope.infowindow.open($scope.map, marker); 
 
     }); 
 

 
     return marker; 
 
    }; 
 

 
    $scope.showDetails = function (index) { 
 
     console.log(JSON.stringify($scope.cities[index])); 
 
    }; 
 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
    });

html, body { 
 
     height: 400px; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 400px; 
 
     }

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<div ng-app="map-example" ng-controller="MapController"> 
 
    <div id="map"></div> 
 
</div>

來源

2017-05-31 08:33:46

將Google Maps API與AngularJS一起使用，地圖不會顯示在中心

回答

相關問題