Question

我在添加标记设置为居中时添加带有标记的谷歌地图

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

这是我的代码：

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

这是我的地图对象

enter image description here

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

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

由于

Answer 1

您的问题是，ui-gmap-marker 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-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

Answer 2

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>

Angular谷歌地图标记

2 个答案: