Angularjs用标记移动地图并获得位置当前标记

时间:2017-10-09 07:35:36

标签: javascript angularjs google-maps

我在Angular中有一个Google Map并在此地图中安装了标记。 我希望标记与地图一起移动。在移动时,标记处于默认位置。如何获得移动标记并获得其当前位置的效果。

我的代码:

<div class="col-lg-5 col-md-5 col-sm-12 col-xs-10 col-lg-offset-2 col-md-offset-1" style="padding: 0">
                <div ng-if="!mapLoaded" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{map.url}}" style="width: 100%;height:100%">
                    <div ng-map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}" styles="{{ map.styles}}">
                    </div>
                </div>
                <div ng-if="mapLoaded" class="map-dialog-container">
                    <div ng-map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}" styles="{{ map.styles}}">
                    </div>
                </div>
            </div>

这是我的控制者:

$scope.map = {
                zoom: 8,
                center: {
                    latitude: 52.348763181988105,
                    longitude: 20.928955078125
                },
                url: 'https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap',

                NgMap.getMap().then(function (map)
            {
                var location = [52.348763181988105,20.928955078125];
                var infowindow = new google.maps.InfoWindow();

        var markerIcon = {
            url: 'resource/img/mapin.png',
            size: new google.maps.Size(32, 41),
            anchor: new google.maps.Point(0, 41),
            scaledSize: new google.maps.Size(32, 41),
            labelOrigin: new google.maps.Point(16, 55)
        };

                var latLng = new google.maps.LatLng(location[0],location[1]);
                var newMarker = new google.maps.Marker({
                position: latLng,
                map     : map,
                icon    : markerIcon
            });
                        console.log(newMarker.map);
            });

1 个答案:

答案 0 :(得分:0)

在地图的center_changed事件上设置一个监听器。将标记的位置设置为地图的中心。

将此添加到您的js:

    map.addListener('center_changed', function() {

        newMarker.setPosition( map.getCenter() );

    });

对于标记位置,您可以执行以下操作:

   console.log( newMarker.getPosition() );

或更具体地说:

   console.log( "Lat:" + newMarker.getPosition().lat() +
                "Lng:" + newMarker.getPosition().lng() );
相关问题