没有显示Angular google-maps

Question

我正在创建一个应用程序,其中我有一个拼车模块.现在我想要显示一张地图,您可以在该地图上看到靠近您的汽车发动机.但是,地图不会显示..

我正在使用指令

http://nlaplante.github.io/angular-google-maps/

我已将google-maps添加到我的依赖项中,并且指令被google地图替换,但它没有显示任何内容.

在我看来,我有这个指令:

<google-map center="center" 
        zoom="zoom" 
        markers="markers" 
        style="height: 400px; width: 100%; display: block;">
</google-map>

我的控制器中有所有变量:

 $scope.center = {
        latitude: 45,
        longitude: -73
    };
    $scope.markers = [];
    $scope.zoom = 8;

当我打开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;">

我已经尝试了很多东西并寻找解决方案,但没有解决我的问题.有人可以提供帮助吗？

提前致谢.HS.

Answer 1

我认为你有两个问题:

1. 标记

   <google-map center="center" zoom="zoom" draggable="true"> <markers models="markers" coords="'geometry'"></markers> </google-map>

   '几何'是您获得坐标的属性.如果标记是自己的坐标,你可以设置coords ="'self'"

2. 样式:不需要在指令处设置地图样式.而不是你需要指定一个CSS样式

   .angular-google-map-container { height: 700px; }

Answer 2

错误消息中有[googleMap, markers]提到。

新版本需要在 google-map 对象内创建一个标记对象，并从 google-map 中删除该指令。

例子：

<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>

我希望这有帮助。