angular-google-maps地图图钉与地图一起移动

时间:2015-02-04 16:58:02

标签: angularjs angularjs-directive angular-google-maps

我有以下代码,但问题是,如果移动地图,指针地址的引脚不固定,则引脚保持在相同位置而不是停留在固定位置。

控制器

$scope.map = {
                        center: {
                            latitude: location.lat,
                            longitude: location.long
                        },
                        zoom: 17,
                        formattedAddress: location.formatted_address
                    }

查看

<ui-gmap-google-map
                class="col-md-12"
                center="map.center"
                zoom="map.zoom"
                ng-cloak>
            <ui-gmap-marker coords="map.center" idkey="1" ng-cloak>
                <ui-gmap-window>
                    <p>{{map.formattedAddress}}</p>
                </ui-gmap-window>
            </ui-gmap-marker>

        </ui-gmap-google-map>

2 个答案:

答案 0 :(得分:10)

标记设置在te地图的中心

<ui-gmap-marker coords="map.center" idkey="1" ng-cloak>

创建地图时不要使地图中心和标记坐标成为相同的对象参考也很重要。

var coords = {lat: x, lng : x}
map.center = coords
marker.coords = coords

因为这也会使标记移动。 使用

marker.coords = Object.create(coords)

答案 1 :(得分:2)

我遇到了类似的问题,其中地图被绑定到1个coords属性,其中地图将以中心为中心。 然后我有一个标记,我想放在同一个位置。

当您移动地图时,绑定的'ui-gmap-google-map center =“map.center”'属性已更改,并且标记也​​绑定到相同的map.center属性,因此它随之移动。

我通过两个单独的coords对象解决了它。一个用于初始地图​​中心,一个用于标记。然后拖动一个不会影响另一个。

(在我的情况下,我希望你可以省略'ui-gmap-google-map center =“map.center”'并依赖于标记'fit'属性来巧妙地适应所有标记而不关心哪里以地图为中心。想想有一种方法可以用'bounds'属性来实现它,但是有点循环遍历所有标记并找出左上角到右下角最大的纬度/长度边界。)