Javascript 谷歌地图没有api键
我的应用程序无法获得“无api密钥”警告。我添加了这个.config:Javascript 谷歌地图没有api键,javascript,angularjs,google-maps,Javascript,Angularjs,Google Maps,我的应用程序无法获得“无api密钥”警告。我添加了这个.config: .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) { GoogleMapApi.configure({ key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g', v: '3', libraries: 'weather,geometry,visualization' }); }]
.config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
GoogleMapApi.configure({
key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g',
v: '3',
libraries: 'weather,geometry,visualization'
});
}])
这让警告消失了,但我的应用程序仍然有一个空白页面,而不是谷歌地图。我也没有收到任何警告,因此我无法找出问题所在,但我认为这一定与API密钥未通过有关。我正在使用此回购:
以下是网页:
我可能犯了错误的完整JS文件:
(function (window, ng) {
ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])
.config(function ($stateProvider) {
$stateProvider.state('location', {
url: '/:lat/:lon',
templateUrl: 'index.html',
controller: 'MapsCtrl',
resolve: {
resolveMap: function (MapService, $stateParams) {
return MapService.getData($stateParams.lat, $stateParams.lon);
}
}
});
})
.config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
GoogleMapApi.configure({
key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g',
v: '3',
libraries: 'weather,geometry,visualization'
});
}])
.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams",
function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) {
$log.currentLevel = $log.LEVELS.debug;
var center = { latitude: $stateParams.lat, longitude: $stateParams.lon };
alert(center)
Object.freeze(center);
$scope.map = {
center: center,
pan: false,
zoom: 16,
refresh: false,
events: {},
bounds: {}
};
$scope.map.circle = {
id: 1,
center: center,
radius: 500, //(current time - date lost)*km/hour
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},
fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: false, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: true, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
events: {
dblclick: function () {
$log.debug("circle dblclick");
},
radius_changed: function (gObject) {
var radius = gObject.getRadius();
$log.debug("circle radius radius_changed " + radius);
}
}
}
//Increase Radius:
$interval(function () {
$scope.map.circle.radius += 30; //dynamic var
$state.transitionTo('location', { //location is the state name
center: $stateParams.center,
radius: $scope.map.circle.radius
},
{
notify: false
});
}, 1000); //end of interval function
} ]); //end of controller
})(window, angular);
和index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="example/assets/stylesheets/example.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="website_libs/dev_deps.js"></script>
<script src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="dist/angular-ui-router.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="dist/angular-google-maps_dev_mapped.js"></script>
<script src="getLoc.js"></script>
<script src="searchRadius.js"></script>
<title>Pet Locate</title>
<!--NEW STUFF FROM TOM-->
</head>
<body style="height: 100%">
<div data-ng-controller="MapsCtrl" ng-if="map.center !== undefined" style="height: 100%">
<ui-gmap-google-map
center='map.center'
zoom='map.zoom'
draggable='map.draggable'
dragging='map.dragging'
refresh='map.refresh'
options='map.options'
events='map.events'
pan='map.pan'>
<ui-gmap-circle
center='map.circle.center'
radius='map.circle.radius'
fill='map.circle.fill'
stroke='map.circle.stroke'
clickable='map.circle.clickable'
draggable='map.circle.draggable'
editable='map.circle.editable'
visible='map.circle.visible'
events='map.circle.events'>
</ui-gmap-circle>
</ui-gmap-google-map>
</div>
</body>
</html>
宠物定位
谢谢@Tom Coughlin的评论,它让我意识到问题是我没有返回有效的'center'属性,因此index.html中的ng if语句阻止了页面的显示。您的页面上有
元素吗?是的,如果您想查看其余内容,我只添加了index.html,也许它与:ng if=“map.center!==undefined”有关?我就是这么想的。我现在想试着把它去掉。