在gulp項目中使用ngMap - 構建失敗 - 未定義'google'

我已經使用Yeoman設置了一個角度項目，並使用ngmap在頁面中嵌入了谷歌地圖，使用給定地址居中。在地圖初始化後，我使用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 - 但是當我用一口構建運行構建，當我運行單元測試我得到這個錯誤，並且是相同的：

'google' is not defined

我需要注入什麼或模擬，以便對google.maps.Geocoder的調用不會失敗？

按照要求，這是從構建

<!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通過一些ngMap的例子閱讀和原來的標記指令可以接受的地址作爲參數，將其轉換成緯度/經度值自動。所以解決方案是刪除所有的google.maps.Geocoder，只是在HTML中。

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

和學習嘗試使用庫

來源

2016-09-29 14:13:16

在gulp項目中使用ngMap - 構建失敗 - 未定義'google'

回答

相關問題