角谷歌地图标记

Question

我有标记的负载增加谷歌地图的标记设置为中心，

但是，当用户改变缩放或向右移动左边的地图，标记位置变化和标记移动到中心和以前不一样，我加在页面载入COORDS的

这是我的代码：

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

编辑：忘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>