gulp 프로젝트에서 ngMap 사용 - 빌드 실패 - google이 정의되지 않음

Yeoman을 사용하여 각도 프로젝트를 설정하고 ngmap을 사용하는 페이지에 Google지도를 포함하고 주어진 주소를 사용하여 중심에 배치했습니다. 지도가 초기화되면 Google 지오 코드 서비스를 사용하여지도의 마커를 추가하여 주소의 위도/경도를 가져옵니다.gulp 프로젝트에서 ngMap 사용 - 빌드 실패 - google이 정의되지 않음

var vm = this; 
vm.address = '1600 Pennsylvania Ave NW, Washington, DC 20500, United States'; 
NgMap.getMap().then(function() { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 
    address: vm.address 
    }, function(results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
    vm.markerPosition = '[' + results[0].geometry.location.lat() + ', ' + results[0].geometry.location.lng() + ']'; 
    } else { 
    console.log("Unable to retrive details for address: " + address); 
    } 
    }); 
});

그것은 잘 작동하고

, 나는 plunkr 여기 실행했습니다 - https://plnkr.co/Ex91VGqdFmL9FP78uzU0?p=preview -하지만 난 꿀꺽 빌드를 사용하여 빌드를 실행할 때 I는 단위 테스트를 실행할 때 나는 같은이 오류를 얻고, :

'google' is not defined

을

google.maps.Geocoder에 대한 호출이 실패하지 않도록하려면 무엇을 주입하거나 가짜로해야합니까?

요청한 같이

,이 ngMap의 일부 예를 통해 자세히

<!doctype html> 
<html ng-app="myApp"> 
    <head> 
    <base href="/"> 
    <meta charset="utf-8"> 
    <title translate>title</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="icon" type="image/png" href="images/icon.png"> 
    <link rel="stylesheet" href="styles/vendor-d41d8cd98f.css"> 
    <link rel="stylesheet" href="styles/app-2dd2bcbbbd.css"> 
    <script src="https://maps.google.com/maps/api/js"></script> 
    </head> 
    <body> 
     <main ui-view></main> 
    </body> 
    <script src="scripts/vendor-83b6c91f4a.js"></script> 
    <script src="scripts/app-41321c4301.js"></script> 
</html>

출처

2016-09-28 Joseph McCarthy

당신이 페이지의 샘플을 공유 할 수있는 라이브러리를 사용하기 전에 모든 설명서를 읽고 배울 수있는? 일반적으로 이와 같은 오류 메시지는 Google Maps JavaScript API가로드되기 전에 함수가 호출되었음을 나타냅니다. – bamnet

확실히, 질문에 빌드가 완료된 후 만들어진 index.html을 추가했습니다. –

빌드에서 index.html을이며 마커 지시자가로 변환 파라미터로 어드레스를 취할 수 밝혀 lat/lon 값을 자동으로 계산합니다. 그래서 해결책은 모든 google.maps.Geocoder를 제거하는 것이며 html에서이를 제거하는 것입니다.

<marker position="{{myMapCtrl.address}}" title="Marker"></marker>

및 빌드 꿀꺽 사용한 후

출처

2016-09-29 14:13:16

gulp 프로젝트에서 ngMap 사용 - 빌드 실패 - google이 정의되지 않음

답변

관련 문제