在 angular google 地图中使用鼠标移动标记

Question

我正在做一个 angular project.It 包含一个 google 地图使用 angular-google-maps。所以在这个地图上，用户可以添加很多 markers。

app.js

angular.module('mapAngular', ['uiGmapgoogle-maps'])
    .controller('MainCtrl', function($scope) {
        angular.extend($scope, {
            map: {
                center: {
                    latitude: 42.3349940452867,
                    longitude: -71.0353168884369
                },
                zoom: 11,
                markers: [],
                events: {
                    click: function(map, eventName, originalEventArgs) {
                        var e = originalEventArgs[0];
                        var lat = e.latLng.lat(),
                            lon = e.latLng.lng();
                        var marker = {
                            id: Date.now(),
                            coords: {
                                latitude: lat,
                                longitude: lon
                            }
                        };
                        $scope.map.markers.push(marker);
                        console.log($scope.map.markers);
                        $scope.$apply();
                    }
                }
            }
        });
    });

HTML

<div>
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">
        <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>
    </ui-gmap-google-map>
</div>

地图将显示所有添加的 markers.I 需要一个功能来动态移动这些标记 mouse.Please 给我一个有价值的指导？谢谢

Plunker

Answer 1

通过在 <ui-gmap-marker> 指令中提供 options="{draggable:true}" 解决了这个问题。

<ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id" options="{draggable:true}" >
</ui-gmap-marker>

在 angular google 地图中使用鼠标移动标记

Move markers using mouse in angular google maps

javascript

jquery

google-maps

angularjs

angular-google-maps