角度谷歌地图标记

24沙龙

我在加载时添加了带有标记的Google地图，将标记设置为居中，

但是，当用户更改缩放比例或在地图上向左移动时，标记位置会发生变化，标记会移至中心，而不是我在页面加载时添加的坐标

这是我的代码：

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="options">
        <ui-gmap-marker idkey="'1'"  coords='map.center'
        icon='{url:    "//developers.google.com/.../beachflag.png" }'>
             <ui-gmap-window isiconvisibleonclick="true">
                            <p ng-cloak>Marker Clicked!</p>
             </ui-gmap-window>
         </ui-gmap-marker>
 </ui-gmap-google-map>

这是我的地图对象

在此处输入图片说明

我的问题与这里相同：https : //stackoverflow.com/questions/31113161/angular-google-map-marker-position-not-fixed-moving-when-map-moves-how-to-make

我该如何添加固定在原处的标记，并且如果用户向左移动或缩放地图，标记将保留在相同的原始坐标上。

谢谢

费西奥

您的问题是该ui-gmap-marker coords属性是对的引用map.center，每当您移动地图时，该引用都会更改。您需要为标记提供一个自己的控制器变量，因此它具有自己的location属性。像这样

控制器：

// Map initialization
$scope.map = { center: { latitude: 32.0889, longitude: 34.8357 }, zoom: 16};

// Give the marker its own scope variable, you can attach other info here, too
$scope.marker = {coords: angular.copy($scope.map.center)}

HTML：

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="options">
    <ui-gmap-marker idkey="'1'"  coords='marker.coords'
        icon='{url:    "//developers.google.com/.../beachflag.png" }'>
        <ui-gmap-window isiconvisibleonclick="true">
            <p ng-cloak>Marker Clicked!</p>
        </ui-gmap-window>
    </ui-gmap-marker>
</ui-gmap-google-map>

编辑：首先忘记了angular.copy。添加了小插曲，展示了折断的行为和正常工作的行为。

损坏：http：//plnkr.co/edit/nkecrOXm84V6lEVr85Yi？p = preview

工作：http：//plnkr.co/edit/kvgLSeuKTPo6FKqIFE89？p = preview

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。