私はイオン プロジェクト内のリーフレット マップへのマーカーとパス トレイルを実装しようとしてきました。ただし、実装時にピンを表示できません。これが私の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
}
});
}]);
