Google Angular 지도JS

Google Angular 지도JS

Angular는 처음입니다.JS와 저는 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

또 다른 대안인 ng-map을 제안합니다.

저는 제 프로젝트를 위해 ng-map이라는 구글 지도 angularjs 디렉티브를 만들었습니다.간단한 기능을 위해 Javascript 코딩이 필요하지 않습니다.

시작하기 전에

1 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-map httpsng2-ui.github.io/ #/ng2-ui.github.io/ #/

Google-map 요소에 "마커" 속성이 포함되어 있는 것 같습니다.

실제로 @Tyler Eich가 언급했듯이 2013년 12월 5일 현재 문서는 구식입니다.마커 속성을 제거하면 효과가 있는 것 같습니다.

마커를 표시하는 방법은 다음과 같습니다.

index.displaces를 표시합니다.

<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.controller.controllers

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;
});

저는 오늘 구글 맵을 각진 어플리케이션에 구현해야 했습니다.구현에는 매우 간단한 것이 필요하기 때문에 직접 실행하기로 하고 간단한 지시문을 작성하기로 했습니다.유용하다고 생각하시는 분들을 위해 제 출처를 아래에 남겨두겠습니다.

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>

그게 전부입니다.구글 쿼리 문자열은 "pb"라고 불리며, 이는 구글에서 가져올 수 있는 모든 내장 코드에 사용되는 코드입니다.이를 직접 지시문에 전달할 수도 있고 컨트롤러 또는 지시문 자체를 통해 전달해야 할 수도 있습니다.iframe 맵 설정은 템플릿 내의 디렉티브로 설정할 수 있습니다.

스트리트 뷰와 맵 뷰 사이에서 변경하려면 소스(db, json 등)에서 가져온 해당 코드를 전송하기만 하면 됩니다.

위의 예에서는 다음과 같습니다.

스트리트 코드:

!1m0!3m2!1sen!2srs!4v1445332712674!6m8!1m7!1s34JkuBgIzmIJNMPFNThuUg! 2m2! 1d40.75816449978445! 2d-73.9891129973! 3f175.51693470959802! 4f7.069842517148402! 5f0.78208654674646464646

지도 코드:

! 1m18! 1m12! 1m3! 1d755.5452773113641! 2d-73.9894615707795! 3d40.75804119870795! 2m3! 1f0! 3f0! 1m2! 1m2! 1m2! 2i768! 4f131m1m1! 1m2! 1m2! 1m2! 1m2! 1m2! 1m1m2! 4x1m2!3m2!3m2!3!3!3!3!3!3!4!3!3!A0x1952a6258d36ecc5!2s맥도날드!5e0!3m2!1sen!2srs!4v144532854795

아직까진 아무 문제가 없었어요여기 바이올린: jsFiddle

마커를 포함하려면 Google 맵 지시문 내의 다른 요소에 마커를 포함시켜야 합니다.다음과 같은 작업을 수행해야 합니다.

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

Angular2의 경우 angular2-google-maps가 있습니다.2016년 5월 14일 기준 라이선스: MIT.

언급URL : https://stackoverflow.com/questions/20355968/google-maps-for-angularjs