javascript - 使用 angularjs 应用在谷歌地图上显示标记

Question

在 ioanic angularjs 应用程序中，我试图在谷歌地图上显示一些位置。我正在渲染谷歌并使用纬度和经度成功地居中地图，但我无法在该确切位置显示标记。这是代码视图

<ion-view title="Location" ng-controller="LocationDetailController as vm">
<ion-content class="has-header">        
    <ui-gmap-google-map draggable="true" center="vm.map.center" zoom="vm.map.zoom" options="options">
        <ui-gmap-markers models="vm.marker" coords="'self'"  fit='true' icon="'icon'">
    </ui-gmap-google-map>   
    </ion-content>
</ion-view>

在 LocationDetailController 里面

...
vm.map = {
            center: {                           
                        latitude: vm.details.Latitude,
                        longitude: vm.details.Longitude
                    },
                    zoom: 13
            };
vm.marker = {                       
                latitude: vm.details.Latitude,
                longitude: vm.details.Longitude
            };
...

我在这里缺少什么？

Answer 1

缺少两件事。

第一个是markers指令需要一个数组并且准备处理许多标记，即使您只将它用于一个标记，传递给模型属性的值也需要是一个数组。

其次，每个标记（即使只有一个）在该标记的模型对象中都需要一个唯一的 ID。

更新代码：

$scope.vm.markers = [{
    id : 99,
    latitude: 43.67023,
    longitude: -79.38676
}];

这是一个工作的 Plunkr