Question

鉴于下面的最小例子，这两张地图最终位于不同的位置;出于某种原因，后者最终在法国，尽管坐标是瑞典斯德哥尔摩。

我如何解决这种奇怪的问题？

要重现，只需将以下内容复制到html文件中并在浏览器中运行（jsFiddle和Plunkr都不想显示地图......）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body ng-app="app">

    <div ng-controller="ctrl">
        <map center="59.325, 18.07" zoom="7"></map>
        <map center="map.center" zoom="7"></map>
    </div>

    <script src="../../../Scripts/angular.js"></script>
    <script src="http://maps.google.com/maps/api/js"></script>
    <script src="../../../Scripts/ng-map.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', ['ngMap']);

        app.controller('ctrl', ['$scope',
            function ($scope) {
                $scope.map = {
                    center: [59.325, 18.07]
                }
            }
        ]);
    </script>
</body>
</html>

Answer 1

这是因为它使用谷歌地图

初始化指令的方式

您的文字＆＃34; 59.325,18.07＆＃34;它加载在html上，这意味着在指令上编译它已经存在的值，否则，传递对象map.center它创建它的指令不会得到它的值，架构应该是重构只是为了从对象中获取你的价值，当我创建自己的map指令时，我发现了那些不同的东西

这是我指令的一部分：

http://plnkr.co/edit/IIGZ0jKIFna2adRqxZpx?p=preview

mapModule.directive("map", ['$timeout', function ($timeout) {
   return {
  restrict: "E",
  priority: 2000,
  scope: {
     centerLatitude: "=",
     centerLongitude: "=",
     refresh: "=",
     width: "@",
     height: "@",
     zoom: "&",
     mapTypeId: "@",
     panControl: "@",
     zoomControl: "@",
     scaleControl: "@",
     show: "="
  },
  compile: function (tElem, tAttrs) {
     return {
        pre: function (scope, element, attrs, ctrl) {
           var toResize, toCenter;
           var map;
           var currentMarkers;

           var el = document.createElement("div");
           el.style.width = "100%";
           if (scope.height) {
              el.style.height = scope.height;
           }
           else {
              el.style.height = "450px";
           }
           element.prepend(el);

           carregaMapa();

           // update the control
           function carregaMapa() {

              //// update size
              //if (scope.width) element.width(scope.width);
              //if (scope.height) element.height(scope.height);

              // get map options
              var options =
              {
                 center: new google.maps.LatLng(0, 0),
                 zoom: 3,
                 mapTypeId: "roadmap",
                 //styles: [{ featureType: "all", stylers: [{ hue: "#0000ff" }, { saturation: -75 }] }, { featureType: "poi", elementType: "label", stylers: [{ visibility: "off" }] }]
                 styles: [{ "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#444444" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.stroke", "stylers": [{ "color": "#d7caca" }] }, { "featureType": "landscape", "elementType": "all", "stylers": [{ "color": "#f2f2f2" }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "saturation": -100 }, { "lightness": 45 }] }, { "featureType": "road.highway", "elementType": "all", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "color": "#d7d2d2" }, { "visibility": "on" }] }]
              };
              if (scope.centerLatitude) options.center = getLocation(scope.centerLatitude, scope.centerLongitude);
              if (scope.zoom()) options.zoom = scope.zoom();
              //if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId;
              //if (scope.panControl) options.panControl = scope.panControl;
              //if (scope.zoomControl) options.zoomControl = scope.zoomControl;
              //if (scope.scaleControl) options.scaleControl = scope.scaleControl;

              // create the map
              map = new google.maps.Map(el, options);
              ctrl.mapaInstacia = map;

              //google.maps.event.addListener(map, 'bounds_changed', function () {
              //   ctrl.lastBound = map.getBounds();
              //});

           }

           scope.$watch("show", function () {
              if (!angular.isDefined(scope.show))
                 return;

              if (!map || !ctrl.carregado) {
                 ctrl.carregado = true;
                 ctrl.fitBounds();
                 return;
              }

              if (ctrl.eventoZoomAdicionado == false) {
                 ctrl.eventoZoomAdicionado = true;
                 google.maps.event.addListener(map, 'zoom_changed', function () {
                    ctrl.lastBound = map.getBounds();
                 });

                 $timeout(function () {
                    google.maps.event.trigger(map, "resize");
                    ctrl.mapaInstacia.fitBounds(ctrl.lastBound);
                 });
              }

              //bug for some reason, google maps goes to zoom zero
              if (map.getZoom() == 0) {
                 if (ctrl.markers.length > 1) {
                    $timeout(function () {
                       ctrl.fitBounds();
                    }, 400);
                 }
              }
           });
           scope.$watch("refresh", function () {
              if (map && scope.refresh == true) {
                 scope.refresh = false;

                 if (ctrl.markers.length > 1) {
                    ctrl.fitBounds();
                 }
                 else {
                    $timeout(function () {
                       var mapCenter = map.getCenter();
                       var mapZoom = map.getZoom();
                       google.maps.event.trigger(map, "resize");
                       map.setZoom(mapZoom);
                       map.setCenter(mapCenter);
                    }, 100);
                 }

              }

           });

           // convert current location to Google maps location
           function getLocation(lat, log) {
              return new google.maps.LatLng(lat, log);
           }
        }
     }
  },
  controller: mapModule.mapController
};
}]);

Angular Map以不同的方式解析位置，具体取决于它是硬编码还是范围属性

1 个答案: