AngularJS 传单标记不会呈现

Question

我一直在尝试在离子项目中实现传单地图的标记和路径跟踪，并且一直在使用此 angularJS 和找到的传单 documentation/example here. However, when implementing I cannot get the pins to be visible. Here is my JSFiddle。我还包括了我的一些代码，因为它不会让我提交我的问题，但它在我的 JSFiddle 上呈现相同的渲染问题。任何帮助都会很棒！

如果我有 JSFiddle link，我将被迫显示代码，所以这就是我得到的，但我认为我的代码中没有解决方案。如果某些图书馆或电话问题。

我的index.html

<style>
.scroll { height: 100%; }
map {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
}
  .angular-leaflet-map {
  display: block;
    width: 100%;
    height: 100%;
    background: #ffff;
  }
</style>
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>

我的pathmap.html

<ion-view view-title="Activities" >
<ion-content ng-controller="PathController" class="has-header">

 <leaflet center="center" paths="paths" defaults="defaults"></leaflet>

 </ion-content>
</ion-view>

controller.js

    angular.module('starter.controllers', ['ionic', 'leaflet-directive', 'ngCordova'])

[......]


.controller("PathController", [ '$scope', function($scope) {
        angular.extend($scope, {
            center: {
             lat: 25.074521,
            lng: -77.348191,
            zoom: 14
            },
            paths: {
                p1: {
                    color: '#33CCCC',
                    weight: 3,
                    latlngs: [
                        { lat: 25.074521, lng: -77.348191 },
                        { lat: 25.074501, lng: -77.317485 },
                        { lat: 25.081517, lng: -77.319116 },
                        { lat: 25.078077, lng: -77.345831 }


                    ],
                }
            },
            markers: {
                marker1: {
                    lat: 25.074521,
                    lng: -77.348191,
                    icon: {
                        url: 'img/nirvana.jpg',
                        iconSize: [80, 80],
                        iconAnchor: [40, 80],
                        popupAnchor: [0, 0],
                        shadowSize: [0, 0],
                        shadowAnchor: [0, 0]
                    }
                },
                marker2: {
                    lat: 25.074501,
                    lng: -77.317485,
                    icon: {
                        iconUrl: 'img/logo.png',
                        iconSize: [800, 800],
                        iconAnchor: [400, 600],
                        popupAnchor: [40, 40],

                    }
                },
                marker3: {
                    lat: 25.081517,
                    lng: -77.319116,
                    icon: {
                        iconUrl: 'img/logo.png',
                        iconSize: [800, 800],
                        iconAnchor: [400, 600],
                        popupAnchor: [40, 40],

                    }
                },
                marker4: {
                    lat: 25.078077,
                    lng: -77.345831,
                    icon: {
                        iconUrl: 'img/logo.png',
                        iconSize: [800, 800],
                        iconAnchor: [400, 600],
                        popupAnchor: [40, 40],

                    }
                },


            },
            defaults: {
                scrollWheelZoom: false
            }
        });
    }]);

Answer 1

您必须在传单指令中调用标记。

<leaflet center="center" paths="paths" defaults="defaults" markers="markers"></leaflet>

希望对您有所帮助。

Answer 2

结果我没有 markers="markers"，需要更新我的 leaflet.js 希望这对其他人有帮助。

Without markers="markers" and old leaflet.js

With markers="markers" and updated leaflet.js

AngularJS 传单标记不会呈现

AngularJS Leaflet Markers Won't Render

marker

angularjs

leaflet

angular-leaflet-directive

ionic-view