3

私は ng-map を使用しており、Google マップに複数のマーカーを表示しようとしています。ページが読み込まれると、マップ上のすべてのマーカーが国に散らばって表示されます。

マップには、1 つのマーカーの拡大部分のみが表示されています。これは、マップの中心を配列の最後の項目に割り当てているためかもしれません。マップをスクロール/ズームアウトすると、すべてのマーカーが表示されます。

複数のマーカーがある場合にマップの中心がどうあるべきかわかりません。また、マップの読み込み時にすべてのマーカーを表示するマップ ビューを取得するにはどうすればよいですか?

コードは次のとおりです。

コントローラ：

$scope.cityMetaData = [];
$scope.getCityInfo = function(){
    for(var i=0; i<$scope.cityIds.length; i++){
        var id = $scope.cityIds[i];
        GetCity.query({cityid: id}, function(data) { 
            if (data.status == "success") {
                var cityData = data;
                $scope.cityMetaData.push(cityData);
                $scope.addressMarker(cityData);
            }
        });
    }
}

$scope.addressMarker = function(cityItem) {
    var address = cityItem.cityName;
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address' : address
    }, function(results, status) {
        if ( status == google.maps.GeocoderStatus.OK ) {
            $scope.lat = results[0].geometry.location.lat();
            $scope.lng = results[0].geometry.location.lng();
            $scope.markerData.push({
                "latitude" : results[0].geometry.location.lat(),
                "longitude" : results[0].geometry.location.lng(),
                "title" : results[0].formatted_address
            });
        } else {
            $log.info('Geocode was not successful for the following reason:' + status);
        }
    });
}
$scope.getCityInfo();

html:

<map center="[{{lat}},{{lng}}]" zoom="8" style="display:block; width:auto; height:auto;"> 
    <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}"></marker>
</map>

サンプル $scope.markerData 配列:

[{"latitude":38.232417,"longitude":-122.6366524,"title":"Petaluma, CA, USA"},
{"latitude":34.1477849,"longitude":-118.14451550000001,"title":"Pasadena, CA, USA"},
{"latitude":40.7556818,"longitude":-73.8830701,"title":"Jackson Heights, Queens, NY, USA"},
{"latitude":32.7766642,"longitude":-96.79698789999998,"title":"Dallas, TX, USA"},
{"latitude":37.7974273,"longitude":-121.21605260000001,"title":"Manteca, CA, USA"},
{"latitude":37.48521520000001,"longitude":-122.23635480000002,"title":"Redwood City, CA, USA"}]
4

2 に答える 2

0

そのための「マップ」プラグインを変更する方法がある場合は、以下をご覧になることをお勧めします

http://angular-ui.github.io/angular-google-maps/

ここでは、ngMaps の場合と非常によく似た API が得られますが、よりきめ細かいオプションが得られます。たとえば、マーカー上の情報ウィンドウ内の ng-templates などです。

それらの実装では、マーカーを生成すると、マーカーに自動的にズームします。ただし、イベントを介して自由にフックして、独自の決定を下すことができます

于 2016-01-29T21:59:05.533 に答える