Угловая карта Google маркер

Question

добавить карту 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

Как я могу добавить маркер, который фиксируется на месте и, если движение пользователя влево вправо или приблизить карту маркеров пребывания на один и те же исходных координаты.

Благодаря

Answer 1

Ваша проблема заключается в том, что ui-gmap-markercoords атрибут является ссылкой на 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> 

EDIT: Забыли 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://rawgit.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>