0
leaflet.jsマップで奇妙な問題が発生しています。何らかの理由で、すべてのマーカーが表示されていても、軌跡線はマップに表示されません。それはスタンドアロンの単純なhtmlページでうまく動作しますが、これをブートストラップテンプレートに埋め込むたびに破損します。 My MVC .chtmlページには次のコードがあり、jqueryはレイアウトページから参照されます。小冊子マップにgpxファイルの行が表示されない
<script src="https://maps.googleapis.com/maps/api/js?key=<key>" async defer></script>
<link rel="stylesheet" href="http://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="http://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/easy-button.css">
<script src="https://unpkg.com/[email protected]/src/easy-button.js"></script>
<script src='~/Scripts/Leaflet.GoogleMutant.js'></script>
<script src="~/Scripts/leaflet.markercluster-src.js"></script>
<link href="~/Content/MarkerCluster.css" rel="stylesheet" />
<link href="~/Content/MarkerCluster.Default.css" rel="stylesheet" />
<script src="~/Scripts/app/GPX.js"></script>
<div id="mapView">
<!-- This is the div that will contain the Google Map -->
<div id="lmap"></div>
</div>
<scripts>
$(function(e){
var lcontrol = new L.control.layers();
var eb = new L.control.layers();
//initialize map
var map = null;
var markers = [];
var latlng = L.latLng(-30.81881, 116.16596);
//set the layers
var roadMutant = L.gridLayer.googleMutant({ type: 'roadmap' });
var satMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'satellite' });
var terrainMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'terrain' });
var hybridMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'hybrid' });
map = new L.map('lmap', {
center: latlng, zoom: 6, maxZoom: 18, scrollwheel: false, layers: [roadMutant],
streetViewControl: false, scrollWheelZoom: false,
});
var track = new L.GPX("/media/fells_loop.gpx", {
async: true
}).on("loaded", function (e) {
map.fitBounds(e.target.getBounds());
});
map.addLayer(track);
map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });
var baseLayers = {
"Streets": roadMutant,
"Satellite": satMutant,
"Terrain": terrainMutant,
"Hybrid": hybridMutant,
};
map.addControl(new L.Control.Layers(baseLayers, { 'GPX': track }, { collapsed: true }));
}
</scripts>
クラスタリングを使用jQueryのは、以下のようなデータを取得するための要求を取得 - あなたの助けを事前に
markers = L.markerClusterGroup({ chunkedLoading: true, spiderfyOnMaxZoom: true, maxClusterRadius: 100, showCoverageOnHover: true });
//map.eachLayer(function (layer) {
// map.removeLayer(layer);
//});
L.Map.include({
'clearLayers': function() {
this.eachLayer(function (layer) {
this.removeLayer(layer);
}, this);
}
});
//clear markers and remove all layers
markers.clearLayers();
var h = $(window).height();
var w = $(window).width();
var atype = $('input:checkbox:checked.gp1').map(function() {
return this.value;
}).get(); // ["18", "55", "10"]
var st = atype + "";
//fetch data
$.ajax({
type: "GET",
url: appUrl + "/Home/map",
data: {'atype': st},
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
$.each(data, function (i, item) {
var img = (item.IconUrl).replace("~", "");
var dpawIcon = L.icon({ iconUrl: appUrl + img, iconSize: [42, 42] });
var id;
var marker = L.marker(L.latLng(item.Latitude, item.Longitude), { icon: dpawIcon }, { title: item.Name });
var content = "<div class='infoDiv'><h3><img src='" + appUrl + img + "' width='24' />" + item.Name + "</h3><p>" + item.Title + "</p><a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm' data-toggle='modal' data-target='#alertDetails'>Details</a></div>";
id = marker._leaflet_id;
marker.bindPopup(content);
markers.addLayer(marker);
});
}
})
.done(function() {
$(".loadingOverlay").hide();
// $("#lmap").height(h-100).width(w-210);
map.invalidateSize(true);
});
感謝を。
JavaScriptコンソールにエラーメッセージが表示されない場合、ポリラインが表示されるまで「余分な」機能をはがしてみます。 – Jieter
私はそれがクラスタリングプラグインと関係していると思います。マーカークラスタリングを使用しないとうまくいきます。 – Tajuddin
@Tajuddinあなたの質問には、あなたを助けるために十分な情報がありません。あなたのJSコードのどこにでも、あなたはクラスタリングプラグインを呼び出します。 – ghybs