2014-11-09 2 views
2

모든 장소 (lieux)에 대한 내 페이지에 Google지도를 표시하고 싶습니다. 내 HTML 페이지에 Google지도 기능이 있습니다.자바 스크립트 호출 함수 매개 변수에서 각도 사용

<script> 
    function initialize(long,lat) { 
    var mapCanvas = document.getElementById('map_canvas'); 
    var mapOptions = { 
     center: new google.maps.LatLng(long, lat), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(mapCanvas, mapOptions) 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    document.getElementById('map_canvas').style.display='block'; 
</script> 

그리고지도를 표시 할 수있는 버튼이 있습니다.

<div class="tab-pane" id="tab_b" ng-controller="LieuController as lieu"> 
     <div class="list-group-item" ng-repeat="lieu in lieu.lieux "> 
    <button onclick="initialize({{lieu.x}},{{lieu.y}})">Click me</button> 
    <div id="map_canvas"></div> 
</div> 

그래서 내가 한 또는 다른 방법이 같은 매개 변수로 함수를 호출 할 수 있습니다?

+0

내부 lieu'var 이름을 다른 것으로 변경할 수 있습니까? '거짓말 '로 컨트롤러와 충돌 할 수 있습니다. – harishr

+0

대신지도 용 지시문을 작성하지 않으시겠습니까? –

답변

0

코드에 몇 가지 문제가 있습니다. 엄밀히 말하자면 Angular와 pure javascript DOM 0 이벤트를 혼합하는 것이 가능합니다. 그러나 ..

. 자신의 코드를 이미 시도한 경우 다음과 같은 오류가 발생했을 것입니다.

HTML DOM 이벤트 속성에 대한 보간은 허용되지 않습니다.

이것은 각도를 벗어난 세계 코드로 각도 범위 데이터를 사용하는 것을 효과적으로 방지합니다. 당신이 취할 수있는 해결 방법이 있습니다. 필요한 데이터를 일부 속성에 렌더링 한 다음 사용할 수 있습니다. 예를 들면 :

<button onclick="initialize(this.getAttribute('data-x'), this.getAttribute('data-y'))" 
     data-x="{{l.x}}" data-y="{{l.y}}">Click me</button> 

2. 이벤트 문제를 해결하면 중복 ID 문제를 해결해야합니다. initialize 함수는 각각인 ngRepeat 행당 별도의 컨테이너로지도를 렌더링해야하기 때문에 동시에 라이브러리로드 이벤트가 발생하면 initialize을 다시 호출합니다.

google.maps.event.addDomListener(window, 'load', initialize); 

3. 즉, 그렇게 실패한 디자인의 앱을 제작해서는 안됩니다. AngularJS의 기본 개념과 철학을 이해해야합니다.

대신 onclick을 사용하고 사용자 정의 서비스에서 initialize을 정의하고 각기 다른 맵 렌더링을 적절한 컨테이너에서 처리하도록 사용자 정의 지시문을 작성할 수 있습니다.

관련 문제