Question

我正在努力让我的角度项目显示多个地图标记。我有一个名为retsAPI的服务，我在那里查询本地MLS数据库的主页列表。我试图在谷歌mapes上显示这些项目。这是我的控制器。

function retsMapController($scope, uiGmapGoogleMapApi, uiGmapIsReady, retsAPI) {
$scope.map = {
    center: {
        latitude: 43.6376107,
        longitude: -116.314943
    },
    zoom: 10
};
$scope.options = {
        scrollwheel: false,
        streetViewControl: false,
        mapTypeControl: false,
        scaleControl: false,
        rotateControl: false,
        zoomControl: false
};

$scope.markers = [];
uiGmapIsReady.promise()
    .then(function (instances) {
        console.log(instances[0].map);
    })
    .then(function () {
        retsAPI.default().success(function(result) {
            $scope.results = result;
            var i = 0;
               result.forEach(function(item) {
                   $scope.markers.push({
                      id: Date.now()+i,
                       coords: {
                           latitude: item['LMD_MP_Latitude'],
                           longitude: item['LMD_MP_Longitude']
                       }
                   });
               i++;
            });
            console.log("MARKER: ", $scope.markers);
    });


});
uiGmapGoogleMapApi.then(function (maps) {
    angular.extend($scope.map, {
        options: {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.LEFT_CENTER
            }
        }
    });
});

这是我的HTML文件。

<div id="real_angular" ng-controller="retsMap" ng-app="real_angular">
<div rets-search-form></div>
{{ markers }}
<ui-gmap-google-map
    ng-if="map.center"
    center='map.center'
    zoom='map.zoom'
    options='options'
    refresh="true">
    <ui-gmap-markers
        models="markers"
        coords="'self'"
        icon="'icon'">
    </ui-gmap-markers>
</ui-gmap-google-map>

这是$ scope.markers的结果

[{"id":1481596995980,"coords":{"latitude":"43.7335624694824","longitude":"-116.400283813477"}},{"id":1481596995981,"coords":{"latitude":"44.9327393","longitude":"-116.0692291"}},{"id":1481596995982,"coords":{"latitude":"44.846809387207","longitude":"-116.179756164551"}},{"id":1481596995983,"coords":{"latitude":"44.0762062072754","longitude":"-116.978248596191"}},{"id":1481596995984,"coords":{"latitude":"44.6780061721802","longitude":"-116.120807826519"}},{"id":1481596995985,"coords":{"latitude":"44.8671951293945","longitude":"-116.026954650879"}},{"id":1481596995986,"coords":{"latitude":"43.0574607849121","longitude":"-114.13264465332"}},{"id":1481596995987,"coords":{"latitude":"43.7259407043457","longitude":"-116.800910949707"}},{"id":1481596995988,"coords":{"latitude":"42.55171340147","longitude":"-114.460141584277"}},{"id":1481596995989,"coords":{"latitude":"44.3812294006348","longitude":"-115.982734680176"}},{"id":1481596995990,"coords":{"latitude":"42.9506072998047","longitude":"-115.298492431641"}},{"id":1481596995991,"coords":{"latitude":"42.5505142211914","longitude":"-114.454963684082"}},{"id":1481596995992,"coords":{"latitude":"43.677565","longitude":"-116.0496032"}},{"id":1481596995993,"coords":{"latitude":"44.2447853088379","longitude":"-116.953323364258"}},{"id":1481596995994,"coords":{"latitude":"43.5853805541992","longitude":"-116.189315795898"}},{"id":1481596995995,"coords":{"latitude":"43.6678466796875","longitude":"-116.680221557617"}},{"id":1481596995996,"coords":{"latitude":"43.6502661556005","longitude":"-116.251468285918"}},{"id":1481596995997,"coords":{"latitude":"43.6551094055176","longitude":"-116.685394287109"}},{"id":1481596995998,"coords":{"latitude":"44.5916213989258","longitude":"-116.669593811035"}},{"id":1481596995999,"coords":{"latitude":"42.6074829101563","longitude":"-114.768821716309"}}]

它似乎也丢失了我的谷歌控件。我不确定是什么让这些消失了。

Answer 1

鉴于version: '2' services: web: image: nginx:alpine ports: - "8080:80" volumes: - ./code:/usr/share/nginx/html // Whenever needed php/python/dababase services can be added here的数据格式，您需要替换从$scope.markers到coords="'self'"的标记绑定：

coords="'coords'"

示例

Demo

将多个标记添加到Angular-google-maps

1 个答案: