角度谷歌地图不会渲染,也不会抛出任何错误
Angular google Map will not render and throws no errors
我是角度的新手,但我认为我一切都正确。这是一个非常简单的设置。
这是应用程序
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>
我在控制台中没有收到任何错误。应用程序的其余部分会呈现,但地图本身不会呈现。任何帮助将不胜感激。
根据文档,您的所有操作都是正确的,除了一件事,您需要提及地图中心和地图的缩放级别才能开始,请参阅快速入门文档
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
map.center
并且map.zoom
从您提供的 MapController 中获取,本地副本对我有用。检查代码的其他部分是否有任何问题。
而且肯定,
.angular-google-map-container { height: 400px; }
到您的 CSS 中,或动态设置访问 DOM 的高度。
相关文章:
- javascript函数,该函数不起作用,但不会显示任何错误
- 找不到在 create-js 中运行的动画,未列出任何错误
- Sonar Javascript插件错误:“无法装饰”和“在其源文件夹中不包含任何文件”
- 有没有任何方法可以从javascript进行跨域请求,并访问它可能生成的错误响应类型(401404等)
- JQuery停止工作,没有任何错误消息
- 我可以't克服这个错误“;未定义的局部变量或方法`f'"任何原因
- 下拉列表中的选定索引在未选择任何值时引发错误
- JS-为什么这不起作用-任何错误
- melonjsapi不会加载我的地图,也不会收到任何错误
- JS bluebird承诺错误没有给出任何细节
- 加载json文件时出现空白网页,没有任何错误
- 在 CreateJS 中显示未捕获的类型错误.下面给出了不显示任何 output.my 代码
- Angular js 工厂不会返回任何带有 404 错误的内容
- jQuery 表单验证不会引发任何错误
- 使用 sailsjs 护照身份验证本地策略既不会给出任何错误,也不会对用户进行身份验证
- 尝试创建一个简单的表单,如果未填写任何内容,该表单将显示错误
- javascript不起作用,但IE没有显示任何错误
- 我的 webgl 着色器程序有什么问题:它在控制台中没有抛出任何错误
- ng路由不起作用.我不知道错误是什么,因为控制台中没有显示任何内容
- 简单的nicEdit根本无法正常工作,没有任何错误