使用AngularJS应用程序在谷歌地图上显示标记

display marker on google map using angularjs app

本文关键字：显示 谷歌地图 AngularJS 应用程序 使用      更新时间：2023-09-26

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

和内部位置详细控制器 

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

我在这里错过了什么？

缺少两样东西。

首先，标记

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

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

更新的代码：

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

这是一个工作的Plunkr

相关文章：