[英]Angular google-maps not displayed
I'm creating an app in which I have a carpooling module. 我正在创建一个应用程序,其中我有一个拼车模块。 Now I want to display a map on which you'll be able to see carpoolers that are close to you.
现在我想要显示一张地图,您可以在该地图上看到靠近您的汽车发动机。 However, the map won't show..
但是,地图不会显示..
I'm using a directive from 我正在使用指令
http://nlaplante.github.io/angular-google-maps/
http://nlaplante.github.io/angular-google-maps/
I've added the google-maps to my dependencies and the directive is replaced by a google map, but it doesn't show anything. 我已将google-maps添加到我的依赖项中,并且该指令被google地图替换,但它没有显示任何内容。
I've got this directive in my view: 在我看来,我有这个指令:
<google-map center="center"
zoom="zoom"
markers="markers"
style="height: 400px; width: 100%; display: block;">
</google-map>
I have all the variables in my controller: 我的控制器中有所有变量:
$scope.center = {
latitude: 45,
longitude: -73
};
$scope.markers = [];
$scope.zoom = 8;
When I open firebug, I get following error: 当我打开firebug时,我收到以下错误:
Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map class="ng-isolate-scope ng-scope" center="center" zoom="zoom" markers="markers" style="height: 400px; width: 100%; display: block;">
I've tried a lot of things and searched for solutions, but none fixed my problem. 我已经尝试了很多东西并寻找解决方案,但没有解决我的问题。 Is there anyone that can help?
有人可以提供帮助吗?
Thanks in advance. 提前致谢。 HS.
HS。
I think you have two problems: 我认为你有两个问题:
Markers 标记
<google-map center="center" zoom="zoom" draggable="true"> <markers models="markers" coords="'geometry'"></markers> </google-map>
Where 'geometry' is the property where you got the coordinates. '几何'是您获得坐标的属性。 If the markers are coordinates as themselves you can set coords="'self'"
如果标记是自己的坐标,你可以设置coords =“'self'”
Style: Don't need to set the map styles at the directive. 样式:不需要在指令处设置地图样式。 Rather than that you need to specify a css style
而不是你需要指定一个CSS样式
.angular-google-map-container { height: 700px; }
In the error message there is [googleMap, markers]
mentioned. 在错误消息中提到了
[googleMap, markers]
。
The new version requires to create a marker object inside of your google-map object and remove the directive from google-map. 新版本需要在google-map对象中创建一个标记对象,并从google-map中删除该指令。
Example: 例:
<google-map center="center"
zoom="zoom"
markers="markers"
style="height: 400px; width: 100%; display: block;">
<markers>
<marker ng-repeat="marker in markers" coords="marker"></marker>
</markers>
</google-map>
I hope this helps. 我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.