Javascript 角度谷歌地图不会渲染,也不会抛出错误
我是新手,但我认为我一切都对。这是一个非常简单的设置 这是应用程序Javascript 角度谷歌地图不会渲染,也不会抛出错误,javascript,angularjs,google-maps,maps,Javascript,Angularjs,Google Maps,Maps,我是新手,但我认为我一切都对。这是一个非常简单的设置 这是应用程序 var appLocations = angular.module('locations', ['uiGmapgoogle-maps']).config(function(uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider.configure({ // key: 'I am not providing a key', v: '
var appLocations = angular.module('locations', ['uiGmapgoogle-maps']).config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
// key: 'I am not providing a key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
appLocations.controller('LocationsController', function($scope, $http) {
$http.get('/json/locations/')
.then(function(res){
$scope.locations = res.data;
});
});
appLocations.controller('MapController', function($scope, $http) {
$http.get('/json/locations/')
.then(function(res){
$scope.locations = res.data;
});
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
});
这是标记
<div class="main1-in" ng-app="locations">
<div ng-controller="MapController">
<ui-gmap-google-map></ui-gmap-google-map>
</div>
<div class="health-care large-12 medium-11 small-12">
<h1>Welcome</h1>
<?php dynamic_sidebar('Welcome')?>
</div>
<div class="location large-12 medium-12 small-12" ng-controller="LocationsController">
<h2>LOCATIONS</h2>
<div class="search">
<input type="text" class="text-field" value="Find a location" ng-model="search" placeholder="Search...">
<span><i class="fa fa-search"></i></span>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="location-carousel large-12 medium-12 small-12">
<ul>
<li ng-repeat="location in locations | filter:search">
<div class="location-in" itemscope itemtype="http://schema.org/MedicalClinic">
<img src="{{location.thumbnail[0]}}" alt="img" width="273" height="157">
<h6><span itemprop="name">{{location.Name}}</span></h6>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">{{location.address1}} {{location.address2}}</span><br>
<span itemprop="addressLocality">{{location.city}}</span>,
<span itemprop="addressRegion">{{location.state}}</span>
<span itemprop="postalCode">{{location.zip}}</span>
</p>
<small itemprop="telephone">{{location.phoneNumber}}</small>
<a href="{{location.permalink}}" itemprop="url">Visit location page</a>
</div>
</li>
</ul>
</div>
</div>
</div>
欢迎
位置
-
{{location.Name}
{{location.address1}}{{location.address2}}
{{location.city}},
{{location.state}
{{location.zip}
{{location.phoneNumber}
控制台中没有错误。应用程序的其余部分渲染,但贴图本身不渲染。任何帮助都将不胜感激 根据文档,您的所有操作都是正确的,除了一件事,您需要提及地图中心和地图的缩放级别,请参见快速入门文档
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
或者动态设置访问DOM的高度。您可以在plnkr.co中做一个工作示例吗?为什么不提供密钥?我的理解是,它们不需要API密钥@cs1193我会看看我能做些什么。所以我试着在plnkr.co上做一个例子,但都没能成功。我正在网上制作一个工作版本,这样你们就可以看了。在此之前,任何帮助都将不胜感激。@AaronBlakeley能给我一些/json/locations的示例内容吗?
.angular-google-map-container { height: 400px; }