it-swarm.com.ru

Карты Google для AngularJS

Я очень плохо знаком с AngularJS и пытаюсь использовать https://github.com/angular-ui/angular-google-maps .

Я просто пытаюсь заставить карту отображаться на моей странице, но получаю сообщение об ошибке, и я не знаю, что это значит. Любая помощь с пониманием этого сообщения об ошибке будет принята с благодарностью.

Я создал здесь планк:

github.com/twdean/plunk

Вот ошибка в браузере:

Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"> 

http://errors.angularjs.org/1.2.3/$compile/multidir?p0=googleMap&p1=markers&p2=new%2Fisolated%20scope&p3=%3Cgoogle-map%20center%3D%22center%22%20draggable%3D%22true%22%20zoom%3D%2
29
tdean

Я предлагаю другую альтернативу, нг-карту.

Я создал директиву google maps angularjs named, ng-map, для своего собственного проекта. Это не требует никакого кодирования Javascript для простой функциональности.

Для начала

Один. Скачать и включить ng-map.js или ng-map.min.js 

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="dist/ng-map.min.js"></script>`

Два. использовать тег map и, необязательно, теги control, marker и shape 

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker position="[40.74, -74.18]" />
  <shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
  <control name="overviewMap" opened="true" />
</ng-map>`  

Примеры

Чтобы использовать его в своем приложении, просто включите «ngMap» в качестве зависимости от вашего приложения.

var myApp = angular.module('myApp', ['ngMap']);

Надеюсь, поможет

-------------- РЕДАКТИРОВАТЬ ------------------- 

Для тех, кто ищет версию angular2,
есть также ng2-maphttps://ng2-ui.github.io/#/google-map

72
allenhwkim

Похоже, вы включили атрибут «маркеры» в свой элемент google-map

Действительно, как отмечает @Tyler Eich , документы по состоянию на 5 декабря 2013 г. остаются устаревшими. Удаление атрибута маркера, кажется, заставляет его работать.

Вот как отображать маркеры:

index.html

<div ng-controller="MapCtrl">
    <google-map id="mymap" 
            center="center" 
            zoom="zoom" 
            draggable="true"                                    
            mark-click="false">
            <markers>
                <marker ng-repeat="marker in markers" coords="marker">
                </marker>
            </markers>
    </google-map>
</div>

controller.js

var controller = module.controller('MapCtrl', function($scope) {
  $scope.myMarkers = [
      {
         "latitude":33.22,
         "longitude":35.33
      },
      ...
  ];

  $scope.center = {
      latitude: 33.895497,
      longitude: 35.480347,
  };

  $scope.zoom = 13;
  $scope.markers = $scope.myMarkers;
  $scope.fit = true;
});
8
Nicholas Credli

У меня только сегодня была потребность внедрить карту Google в мое угловое приложение. Поскольку моя реализация требовала чего-то достаточно простого, я решил сделать это сам и создать простую директиву. Я оставлю свой источник ниже для тех, кто может найти его полезным.

  1. Создать директиву
  2. Создать HTML
  3. При необходимости передайте координаты через директиву/контроллер, если вам нужно.

ДИРЕКТИВА

angular.module('ngPortalApp')
  .directive('googleMap', function () {
    return {
      template: '<iframe width="100%" height="350" frameborder="0" style="border:0"></iframe>',
      restrict: 'E',
      scope: {
        pbcode: '='
      },
      link: function postLink(scope, element) {
        var mapFrame = element.find("iframe");
          if (scope.pbcode) {
            mapFrame.attr('src', "https://www.google.com/maps/embed?pb=" + scope.pbcode);
          }
          else {
            mapFrame.attr('src', '');
          }
      }
    };
  });

HTML

<div class="col-lg-12">
<google-map pbcode="'!1m0!3m2!1sen!2srs!4v1445332712674!6m8!1m7!1s34JkuBgIzmIJNmpFNThuUg!2m2!1d40.75816449978445!2d-73.98911289129973!3f175.51693470959802!4f7.069842517148402!5f0.7820865974627469'"></google-map>
</div>

Вот и все, что нужно сделать. Помните, что строка запроса Google называется «pb». Этот код используется во всех кодах для встраивания, которые вы можете получить из Google. Вы можете передать это своей директиве прямо вверх или, если вам нужно, через свой контроллер или даже через саму директиву. Вы можете установить любые настройки карты iframe в директиве шаблона.

Чтобы переключиться между просмотром улиц или просмотром карты, просто отправьте соответствующий код из любого источника (db, json и т.д.).

Для приведенного выше примера:

Код улицы:

! 1M0! 3м2! 1sen! 2srs! 4v1445332712674! 6m8! 1m7! 1s34JkuBgIzmIJNmpFNThuUg! 2м2! 1d40.75816449978445! 2d-+73,98911289129973! 3f175.51693470959802! 4f7.069842517148402! 5f0.7820865974627469

Код карты:

! 1м18! 1м12! 1м3! 1d755.5452773113641! 2d-73.98946157079955! 3d40.75804119870795! 2м3! 1f0! 2f0! 3f0! 3м2! 1i1024! 4f13.100000000000000000000000000000000000000000000 5e0! 3m2! 1sen! 2srs! 4v1445332854795

У меня еще не было проблем с этим . Вот скрипка: jsFiddle

4
geostima

Для Angular2 есть angular2-google-maps . Лицензия от 2016-05-14: MIT.

0
koppor

Если вы хотите включить маркеры, вы должны сделать это в другом элементе директивы google-maps . Вы должны сделать что-то вроде:

<google-maps options="someOptionsObject"> 
<markers cords="someArrayWithLatitudeAndLongitudeCords"></markers>    
</google-maps>
0
PandAngular