Question

我一直在尝试将一个标记和路径跟踪实现到离子项目中的传单地图，并且一直在使用这个angularJS与Leaflet文档/示例here。但是，实施时我无法看到引脚。这是我的JSFiddle。我还包括了一些我的代码，因为它不会让我提交我的问题而不是我的JSFiddle上的渲染问题。任何帮助都会很棒！

如果我有一个JSFiddle链接，我被迫显示代码，所以这就是我得到的，但我不认为我的代码中的解决方案。如果某些图书馆或通话问题。

我的 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希望这可以帮助其他人。

没有markers="markers"和旧的leaflet.js

使用markers="markers"并更新了leaflet.js

AngularJS宣传单标记无法呈现

2 个答案: