MapBox İşaretçileri yakınlaştırmaya devam et

MapBoxgl üzerinde çalışıyorum ve birkaç işaretçi eklemek istiyorum. İşte MapBox İşaretçileri yakınlaştırmaya devam et

benim index.html geçerli:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
     <link href=" /assets/css/bootstrap.min.css " rel="stylesheet" /> 
     <link href=" /assets/css/mapbox-gl.css " rel="stylesheet" /> 
     <link href=" /assets/css/main.css " rel="stylesheet" /> 
</head> 
<body> 
     <div id="map"></div> 

<script src="/assets/js/mapbox-gl.js"></script> 
<script src="/assets/js/map-style.js"></script> 

</body> 
</html>

Bu harita style.js:

#map { position:absolute; top:0; bottom:0; width:100% } 

.markers { 
    display: absolute; 
    border: none; 
    border-radius: 50%; 
    cursor: pointer; 
    padding: 0; 
}

var map = new mapboxgl.Map({ 
    container: 'map', 
    center: [57.3221, 33.5928], 
    zoom: 5, 
    style: style 
}); 


var geojson = { 
type: 'FeatureCollection', 
features: [{ 
type: 'Feature', 
geometry: { 
    type: 'Point', 
coordinates: [30.61, 46.28] 
}, 
properties: { 
    title: 'point 1', 
    description: 'point 1 Description', 
    message: 'point1', 
    iconSize: [25, 25] 
} 
}, 
{ 
type: 'Feature', 
geometry: { 
    type: 'Point', 
coordinates: [30.62, 46.2845] 
}, 
properties: { 
    title: 'point 2', 
    description: 'point 2 Description', 
    message: 'point 2', 
    iconSize: [25, 25] 
} 
    }] 
}; 

map.on('load', function() { 
// add markers to map 
geojson.features.forEach(function(marker) { 
// create a DOM element for the marker 
var el = document.createElement('div'); 
el.className = 'markers'; 
el.style.backgroundImage = 'url(assets/marker-azure.png)'; 
//el.style.width = marker.properties.iconSize[0] + 'px'; 
el.style.height = marker.properties.iconSize[1] + 'px'; 

el.addEventListener('click', function() { 
    window.alert(marker.properties.message); 
}); 

// add marker to map 
new mapboxgl.Marker(el) 
    .setLngLat(marker.geometry.coordinates) 
    .addTo(map); 
}); 
});

Ve aşağıdaki main.css haritasına ilişkin kısmı ve işaretleyici olduğu

Yani, benim sorun şu ki, genişlik özelliğini işaretleyicilere eklediğimde, onların simgesi doğru bir şekilde gösterilmeli (biraz uzatılmış) ancak bunlar Rong koordine etmek ve aşağıdaki resimde olduğu gibi zoom hareket: genişlik özelliği ortadan Öte yandan

, bunlar doğru yerde ve yakınlaştırma üzerinde hareket etmez, ama çok gerilir ve edilir aslında kadar geniş ekran olarak (aşağıdaki resim):

Ben ön yükleme alanı kullandım dikkat çekicidir. Bunun sebebi olabilir mi? Değilse, sorun nedir?

Teşekkür

kaynak

2017-11-01 Mahdi

çözüm bulundu ve bu sorunu karşılaşacak başkalarıyla burada paylaşabilirsiniz. Sorun, kitaplığın en yeni olmayan bir sürümünü kullanmasından kaynaklanıyordu. En son sürüme geçtikten sonra, bu sorundan kurtulabilirim.

npm kullandığınızda bu tür sorunların oluşabileceğini unutmayın. Kütüphanenin tamamen indirildiğinden ve en son sürüm olduğundan emin olun.

En son MapBox sürümleri here adresinde bulunabilir.

kaynak

2017-11-06 14:59:48 Mahdi

MapBox İşaretçileri yakınlaştırmaya devam et

cevap

İlgili konular