angularjs - 当我使用 ng-map 和 angularjs 进行缩小时，标记会移动

Question

我正在使用 ngmap 和 angularjs 在谷歌地图中创建标记。一切都好，但是当我缩小地图时，标记会移动。

我的代码：

 var app = angular.module('dataview', ['ngMap'])
    app.controller('DataViewCtrl', function($scope, $http)
    {
      $scope.markers=[{lat:30.2817, lng:-81.5273},{lat:30.6824, lng:-81.9680},{lat:31.0004, lng:-82.1580}];

      $scope.mapcenter={lat:$scope.markers[0].lat, lng:$scope.markers[0].lng};
    }

<script src = 'http://maps.google.com/maps/api/js?v=3&sensor=true'></script>
 <script src = '/assets/vendor/ngmap/build/scripts/ng-map.min.js'></script>
    <map center="{{mapcenter.lat}}, {{mapcenter.lng}}" zoom="5" ng-if="is_map" style="height: 500px;">
        <marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
    </map>

结果OK

坏结果（缩小时）

Answer 1

我遇到了同样的问题，我想您为示例输入了最少的代码。就我而言，问题出在标记图标的 SVG 图像中。我通过更改其他人的图像解决了这个问题。尝试使用默认图标来测试您是否有同样的问题。

Answer 2

您正在尝试实现的工作示例如下：

http://plnkr.co/edit/P5Tlui

请注意，当您缩小时，标记位置现在是如何保持的。

我通过如下分配标记的坐标解决了这个问题：

$scope.markers = [{
    lat: 30.2817,
    lng: -81.5273
  }, {
    lat: 30.6824,
    lng: -81.9680
  }, {
    lat: 31.0004,
    lng: -82.1580
  }];

Answer 3

For some reason, In css file I put

canvas{width: 100% !important; height: 360px !important;}

I remove this line and fixed the problem. cavas style to conflict with height defined for map in html