7
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