Angularjs 角度谷歌地图标记

我添加了谷歌地图上的标记加载标记设置为中心

但当用户改变缩放或左右移动地图时，标记位置会改变，标记会移到中间，而不是我在页面加载时添加的坐标

这是我的代码：

<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>

标记器已单击

这是我的地图对象

我的问题和这里一样：

如何添加固定在位置上的标记，如果用户左右移动或缩放地图，标记将保持在相同的原始坐标上

---

谢谢

您的问题是

ui gmap标记

coords

属性是对

map.center

的引用，每当您移动地图时，该属性都会更改。您需要为标记拥有自己的控制器变量，以便它具有自己的位置属性。像这样的,

控制器：

// 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标记
coords
属性是对
map.center
的引用，每当您移动地图时，该属性都会更改。您需要为标记拥有自己的控制器变量，以便它具有自己的位置属性。像这样的,

控制器：

// 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:


标记器已单击

编辑：请先复制。增加了劫掠物，展示了破碎和工作行为

破碎的：

工作：
此代码显示谷歌地图中的多个标记。
{{currentPin.title}}

角度.module（'mapApp'，['ngMap']））
.controller（'mapController'，函数（NgMap，$scope，$q，$log）{
NgMap.getMap（）.then（函数（map）{
$scope.map=map；
//$scope.map.setZoom（13）；
var latlng=新的google.maps.latlng（37.0902，-122.636652）；
$scope.map.setCenter（latlng）；
});   
$scope.currentPin={title:，url:：}；
$scope.markerData=[]；
$scope.cityMetaData=[]；
$scope.getCityInfo=函数（国家）{
$scope.markerData=[]；
风险值数据=[
{cityName:'Petaluma，CA，USA'，'url'：'https://www.flipkart.com/' },
{城市名称：'Jackson Heights，Queens，NY，USA'，'url'：'https://www.flipkart.com/' },
{城市名称：'联合国儿童基金会6号费尔布里奇大道贝尔格拉维亚，津巴布韦哈拉雷'，'url'：'https://www.flipkart.com/' },
];
data.forEach（功能（项）{
var cityData=项目；
$scope.cityMetaData.push（cityData）；
$scope.addressMarker（cityData）；
});
}
$scope.showDetail=功能（e，pin）{
$scope.currentPin=pin；
$scope.map.showInfoWindow（'foo-iw'，this）；
};
$scope.hideDetail=函数（）{
$scope.map.hideInfo窗口（'foo-iw'）；
};
$scope.addressMarker=函数（cityItem）{
var deferred=$q.deferred（）；
var address=cityItem.cityName；
var url=cityItem.url；
var geocoder=new google.maps.geocoder（）；
地理编码({
“地址”：地址
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
$scope.$apply（函数（）{
$scope.markerData.push({
“纬度”：结果[0]。几何体。位置。纬度（），
“经度”：结果[0]。几何体。位置。lng（），
“标题”：结果[0]。格式化的\u地址
，“url”：url
});
});
}否则{
$log.info（'地理编码因以下原因未成功：'+状态）；
}
});
}
$scope.getCityInfo（）；
});
此代码显示google地图中的多个标记。
{{currentPin.title}}

角度.module（'mapApp'，['ngMap']））
.controller（'mapController'，函数（NgMap，$scope，$q，$log）{
NgMap.getMap（）.then（函数（map）{
$scope.map=map；
//$scope.map.setZoom（13）；
var latlng=新的google.maps.latlng（37.0902，-122.636652）；
$scope.map.setCenter（latlng）；
});   
$scope.currentPin={title:，url:：}；
$scope.markerData=[]；
$scope.cityMetaData=[]；
$scope.getCityInfo=函数（国家）{
$scope.markerData=[]；
风险值数据=[
{cityName:'Petaluma，CA，USA'，'url'：'https://www.flipkart.com/' },
{城市名称：'Jackson Heights，Queens，NY，USA'，'url'：'https://www.flipkart.com/' },
{城市名称：'联合国儿童基金会6号费尔布里奇大道贝尔格拉维亚，津巴布韦哈拉雷'，'url'：'https://www.flipkart.com/' },
];
data.forEach（功能（项）{
var cityData=项目；
$scope.cityMetaData.push（cityData）；
$scope.addressMarker（cityData）；
});
}
$scope.showDetail=功能（e，pin）{
$scope.currentPin=pin；
$scope.map.showInfoWindow（'foo-iw'，this）；
};
$scope.hideDetail=函数（）{
$scope.map.hideInfo窗口（'foo-iw'）；
};
$scope.addressMarker=函数（cityItem）{
var deferred=$q.deferred（）；
var address=cityItem.cityName；
var url=cityItem.url；
This code shows multiple marker in google map.



<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://code.angularjs.org/1.4.5/angular.js"></script>
<script src="https://combinatronics.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="mapApp" ng-controller="mapController">

    <map zoom-to-include-markers="true" style="display:block; width:900px; height:500px;">
        <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}" on-click="showDetail(pin)"></marker>
        <info-window id="foo-iw">
           <div ng-non-bindable="">
                <h1>{{currentPin.title}}</h1><br/>
                <a href="{{currentPin.url}}">Click Here</a>
           </div>

        </info-window>
    </map>
</div>

<script>
angular.module('mapApp', ['ngMap'])
    .controller('mapController', function (NgMap, $scope, $q, $log) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
            //$scope.map.setZoom(13);
            var latlng = new google.maps.LatLng(37.0902, -122.636652);
            $scope.map.setCenter(latlng);
        });   

        $scope.currentPin = {title: "",url:""};
        $scope.markerData = [];
        $scope.cityMetaData = [];

        $scope.getCityInfo = function (country) {
            $scope.markerData = [];

            var data = [
                { cityName: ' Petaluma, CA, USA','url':'https://www.flipkart.com/' },
                { cityName: ' Jackson Heights, Queens, NY, USA','url':'https://www.flipkart.com/' },
                { cityName: ' UNICEF 6 Fairbridge Avenue Belgravia, Harare, Zimbabwe','url':'https://www.flipkart.com/' },
            ];


            data.forEach(function (item) {
                var cityData = item;
                $scope.cityMetaData.push(cityData);
                $scope.addressMarker(cityData);
            });
        }


        $scope.showDetail = function (e, pin) {
          $scope.currentPin = pin;
          $scope.map.showInfoWindow('foo-iw', this);
        };

        $scope.hideDetail = function () {
           $scope.map.hideInfoWindow('foo-iw');
        };

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




    });
</script>