javascript Angular 应用中的 Google MAP API 密钥
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31073131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google MAP API Key in Angular App
提问by Kubi
I have an angular app and trying to add a simple google map to a page. But I'm getting this:
我有一个 angular 应用程序并试图向页面添加一个简单的谷歌地图。但我得到了这个：
> Google Maps API is required. Please register the following JavaScript
> library http://maps.google.com/maps/api/js?sensor=true. <div
> data-ui-view="" class="ng-scope">(anonymous function) @
> angular.js:11598$get @ angular.js:8548$ @ angular.js:8219v @
> angular.js:7726g @ angular.js:7075(anonymous function) @
> angular.js:6954k @ angular-ui-router.min.js:7k.compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075g @ angular.js:7078(anonymous function) @
> angular.js:6954compile @ angular-ui-router.min.js:7$ @
> angular.js:8217v @ angular.js:7726g @ angular.js:7075(anonymous
> function) @ angular.js:6954k @ angular-ui-router.min.js:7k.compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954k @
> angular-ui-router.min.js:7(anonymous function) @
> angular-ui-router.min.js:7$get.l.$broadcast @
> angular.js:14707x.transitionTo.x.transition.I.then.x.transition.x.transition
> @ angular-ui-router.min.js:7(anonymous function) @
> angular.js:13175$get.l.$eval @ angular.js:14388$get.l.$digest @
> angular.js:14204(anonymous function) @ angular.js:14427e @
> angular.js:4902(anonymous function) @ angular.js:5282
> js?sensor=true&_=1435321003344:8 Failed to execute 'write' on
> 'Document': It isn't possible to write into a document from an
> asynchronously-loaded external script unless it is explicitly opened.
The page below is a sample I downloaded from https://codeload.github.com/hpneo/gmaps/and the weird thing is that it works OK if I browse it over http://myapp/directroy/map.htmlbut it's giving me the error above if I want to reach there over http://myapp/ng-route-to-map-page
下面的页面是我从https://codeload.github.com/hpneo/gmaps/下载的示例 ，奇怪的是，如果我通过http://myapp/directroy/map.html浏览它，它可以正常工作，但它是如果我想通过http://myapp/ng-route-to-map-page到达那里，给我上面的错误
I tried to register the javascript sdk over code.google.com and include the library into the page as
我尝试通过 code.google.com 注册 javascript sdk 并将库包含到页面中
Am I doing this wrong? I put the API Key to there
我这样做错了吗？我把 API Key 放在那里
<script type="text/javascript" src="http://maps.google.com/maps/api/js?&key=APIKEY"></script>
But still getting the same error.
但仍然得到同样的错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js — Geometry overlays</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script type="text/javascript">
var map, rectangle, polygon, circle;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
var bounds = [[-12.030397656836609,-77.02373871559225],[-12.034804866577001,-77.01154422636042]];
rectangle = map.drawRectangle({
bounds: bounds,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
var paths = [[-12.040397656836609,-77.03373871559225],[-12.040248585302038,-77.03993927003302],[-12.050047116528843,-77.02448169303511],[-12.044804866577001,-77.02154422636042]];
polygon = map.drawPolygon({
paths: paths,
strokeColor: '#25D359',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#25D359',
fillOpacity: 0.6
});
var lat = -12.040504866577001;
var lng = -77.02024422636042;
circle = map.drawCircle({
lat: lat,
lng: lng,
radius: 350,
strokeColor: '#432070',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#432070',
fillOpacity: 0.6
});
for(var i in paths){
bounds.push(paths[i]);
}
var b = [];
for(var i in bounds){
latlng = new google.maps.LatLng(bounds[i][0], bounds[i][1]);
b.push(latlng);
}
for(var i in paths){
latlng = new google.maps.LatLng(paths[i][0], paths[i][1]);
b.push(latlng);
}
map.fitLatLngBounds(b);
});
</script>
</head>
<body>
<h1>GMaps.js — Geometry overlays</h1>
<div class="row">
<div class="span11">
<div id="map"></div>
</div>
<div class="span6">
<p>You can draw geometry overlays (which can be a polygon or a rectangle or a circle):</p>
<pre>polygon = map.drawRectangle({
bounds: bounds,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
polygon = map.drawPolygon({
paths: paths,
strokeColor: '#25D359',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#25D359',
fillOpacity: 0.6
});
circle = map.drawCircle({
lat: lat,
lng: lng,
radius: 350, //350 meters
strokeColor: '#432070',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#432070',
fillOpacity: 0.6
});</pre>
<p>Be careful with the settings as they are not the same for each overlay.</p>
</div>
</div>
</body>
</html>
回答by RobSeg
If you want to use a Google map inside an Angular application you should use the Angular google maps directive.
如果您想在 Angular 应用程序中使用 Google 地图，您应该使用Angular google maps 指令。
Simply install using bower
只需使用 bower 安装
bower install angular-google-maps
Load scripts in your HTML page
在 HTML 页面中加载脚本
Note that the API key provided by Google can be specified at the tail end of the maps.googleapis script reference.
请注意，可以在 maps.googleapis 脚本参考的尾部指定 Google 提供的 API 密钥。
<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js?key=123...'></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
Inject dependency in your app
在您的应用程序中注入依赖项
angular.module('myApplicationModule', ['uiGmapgoogle-maps']);
Add a map to your scope
将地图添加到您的范围
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
And add a map to your template, done!
并将地图添加到您的模板中，完成！
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
Don't forget to specify height in your CSS
不要忘记在 CSS 中指定高度
.angular-google-map-container { height: 400px; }
You don't have to specify API key but if you don't, expect to see:
您不必指定 API 密钥，但如果您不指定，则会看到：
NoApiKeys developers.google.com/maps/documentation/javascript/…
NoApiKeys developer.google.com/maps/documentation/javascript/...
回答by Kubi
OK. My problem here was I was referencing the maps api twice. Once in my parent page and also in the map page -child- I included it in resolve.
行。我的问题是我两次引用了地图 API。一旦在我的父页面和地图页面 -child- 中，我将它包含在 resolve.xml 中。
Once I removed the one in the parent page, my problem resolved. Maybe, it helps others having the same issue. Just check the references. On the other hand, I don't find it proper to give an error such as Google Maps API is required. Please register the following JavaScriptin my situation.
一旦我删除了父页面中的那个，我的问题就解决了。也许，它可以帮助其他有同样问题的人。只需检查参考资料。另一方面，我认为Google Maps API is required. Please register the following JavaScript在我的情况下给出错误是不合适的。
回答by neaumusic
Taken from a similar question
取自一个类似的问题
Specify &callback=yourCallbackin the api request and document.writewon't get called, where
&callback=yourCallback在 api 请求中指定并且document.write不会被调用，其中
window["yourCallback"] = function () {}; // compiler minified dot notation for me
window["yourCallback"] = function () {}; // compiler minified dot notation for me
Either that, or have the http://maps.googleapis.com/maps/api/jsscript tag inside of your HTML as it's getting parsed the first time, like in a newly constructed iframe or server response as a string.
要么是这样，要么http://maps.googleapis.com/maps/api/js在 HTML 中包含脚本标记，因为它是第一次被解析，就像在新构建的 iframe 或服务器响应中作为字符串一样。
I believe it's the network request "referrer" which is checked against your &client=yourClientIDand &signature=yourHMACSHA1EncodedSignature, so make sure your window.location.hrefmatches the request header if you're going to sign it. document.referrerin an iframe will show the parent frame's url unless they block it (security concern for some sites)
我相信这是针对您的&client=yourClientID和检查的网络请求“引用” &signature=yourHMACSHA1EncodedSignature，因此window.location.href如果您要签名，请确保您的请求标头匹配。document.referrer在 iframe 中将显示父框架的 url，除非他们阻止它（某些站点的安全问题）
document.writewould clear your document if it happened at a later time, so it's prevented
document.write如果它发生在以后，将清除您的文档，因此它被阻止
