我正在尝试使用我的图标集群，这样他们就不会紧紧抓住彼此。 Mapbox提供了一些关于如何使用群集图标的示例，但我无法弄清楚他们如何将图标/信息放到地图上。
这是他们的代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Clusters with custom cluster icons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoib21uaXVzbm93IiwiYSI6ImFlZ0pNSXMifQ.VNyOy9GaRZ1cAS2nDTp3tw';
// Here we don't use the second argument to map, since that would automatically
// load in non-clustered markers from the layer. Instead we add just the
// backing tileLayer, and then use the featureLayer only for its data.
var map = L.mapbox.map('map')
.setView([40.73, -74.011], 13)
.addLayer(L.mapbox.tileLayer('mapbox.streets'));
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
var clusterGroup = new L.MarkerClusterGroup({
// The iconCreateFunction takes the cluster as an argument and returns
// an icon that represents it. We use L.mapbox.marker.icon in this
// example, but you could also use L.icon or L.divIcon.
iconCreateFunction: function(cluster) {
return L.mapbox.marker.icon({
// show the number of markers in the cluster on the icon.
'marker-symbol': cluster.getChildCount(),
'marker-color': '#422'
});
}
});
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
});
</script>
</body>
</html>
看来他们正在这里输入他们的地图数据
“L..mapbox.featureLayer（'examples.map-h61e8o8e'）。on（'ready'，function（e）”
因为如果我用自己的地图替换'examples.map-h61e8o8e'，我会失去所有的图标。但是我没有露面。
所以我无法弄清楚他们是如何提取这些信息的。所有这一切都是我现在的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom marker icons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.menu-ui {
background:#A2A19F;
position:absolute;
bottom:50px;
left:50%;
margin-left:-110px;
z-index:1;
border-radius:3px;
width:auto;
}
.menu-ui a {
font-size:22px;
color:#fff;
display:table-cell;
padding:10px;
text-decoration:none;
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active,
.menu-ui a.active:hover {
background:#DB3E3A;
color:#FFF;
}
.popup {
text-align:center;
}
.popup .slideshow .image { display:none; }
.popup .slideshow .image.active { transition: opacity 2s linear;display:block; }
.popup .slideshow img {
width:100%;
}
.popup .slideshow .caption {
background:none;
padding:10px;
color:white;
}
.popup .cycle {
padding:10px 0 20px;
}
.popup .cycle a.prev { float:left; }
.popup .cycle a.next { float:right; }
li.menu-item {
margin:0 0 10px 0;
}
</style>
<nav class='menu-ui'>
<a href='#' class='active' data-filter='Development'>Development</a><a href='#' data-filter='Land'>Land</a>
</nav>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<div id='map'></div>
<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src="/mapbox.js/assets/data/realworld.388.js"></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoib21uaXVzbm93IiwiYSI6ImFlZ0pNSXMifQ.VNyOy9GaRZ1cAS2nDTp3tw';
var southWest = L.latLng(21.284438,-131.265625),
northEast = L.latLng(54.606163, -62.929688),
bounds = L.latLngBounds(southWest, northEast);
var map = L.mapbox.map('map', 'coltonneil.3dc5d18e', {
// set that bounding box as maxBounds to restrict moving the map
// see full maxBounds documentation:
// http://leafletjs.com/reference.html#map-maxbounds
maxBounds: bounds,
maxZoom: 16,
minZoom: 5
});
// zoom the map to that bounding box
map.fitBounds(bounds);
var myLayer = L.mapbox.featureLayer('coltonneil.3dc5d18e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
var clusterGroup = new L.MarkerClusterGroup({
// The iconCreateFunction takes the cluster as an argument and returns
// an icon that represents it. We use L.mapbox.marker.icon in this
// example, but you could also use L.icon or L.divIcon.
iconCreateFunction: function(cluster) {
return L.mapbox.marker.icon({
// show the number of markers in the cluster on the icon.
'marker-symbol': cluster.getChildCount(),
'marker-color': '#422'
});
}
});
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
});
var cluster = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});
var geoJson = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-80.190583, 25.767619]
},
"properties": {
"title": "BRICKELL WORLD PLAZA",
//this should let the button code know whether this is a development or a //land catagory, IT IS CASE SENSATIVE!!
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/vQgol04.jpg','<p><b>Location: Miami, Florida</b></p>More than just another development. Brickell World Plaza is a benchmark for Miami’s future.<center>Visit <a href="http://www.brickellworldplaza.com/"> 600 Brickell.</a></center>'],
['http://i.imgur.com/wCyKfJs.jpg',' The soaring 600 Brickell office tower is unmatched in its future-smart, Eco-friendly design and services.'],
['http://i.imgur.com/kvSRm4L.jpg','The 30,000-square-foot, tree-shaded Plaza will enrich the community for generations to come.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-82.356899, 29.633012]
},
"properties": {
"title": "THE BARTRAM",
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/P6qbN8I.jpg','<p><b>Location: Gainesville, Florida</b></p>The Bartram is an environmentally friendly, Class A luxury, resort-style apartment complex, located at 2337 SW Archer Road in Gainesville Florida.<center>Visit <a href="http://thebartram.com/"> The Bartram.</a></center>'],
['http://i.imgur.com/yDLxcqI.jpg','The Bartram offers the ideal luxury living experience. Our property consists of 334 spacious apartments that offer modern design and relaxation.'],
['http://i.imgur.com/tcroFTJ.jpg','Once residents leave their apartments they have access to a handful of amenities which include resort-style swimming pools, our Meditation Garden, the Clubhouse, which features complimentary Wi-Fi access, and our two-story fitness center.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-84.650528, 34.610110]
},
"properties": {
'title': 'CARTER\'S LAKE',
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/GwbPN51.png','<p><b>Location: Ellijay, Georgia</b></p>This newly planned and gated community of 350 lots opened in 2004 on Carter’s Lake in Glimer county, Georgia.'],
['http://i.imgur.com/GwbPN51.png','The lots range in size from one to two acres each and offer some of the most spectacular views of the lake and the mountains of North Georgia.'],
['http://i.imgur.com/GwbPN51.png','Foram Group was the original co-developer of this project and is currently the asset manager for all lots in phase V of the development.']
]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.052371, 32.043918]
},
"properties": {
'title': 'LAUREL VIEW',
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/KM3zmmP.gif','<p><b>Location: Savannah, Georgia</b></p>Laurel View is located just 30 miles south of historic downtown Savannah at the Midway interchange at 1-95, at Exit 76.'],
['http://i.imgur.com/xf4xz5M.jpg','The property is 5,000 acres with more than ten miles of pristine marsh and deep water frontage on Jones Creek and Laurel View River.'],
['http://i.imgur.com/GwbPN51.png','Laurel View will be a complete sustainable community with marina golf, residential and commercial sites on some of the most spectacular land in the coastal south.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.247057, 32.115481]
},
"properties": {
'title': 'POOLER, GA',
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/JyIuLMm.jpg','<p><b>Location: Pooler, Georgia</b></p>Over 900 acres of commercial and residential land located near the Parkway Interchange in Savannah Georgia.'],
['http://i.imgur.com/4t1xF2w.jpg','Ready to build lots with highway access less than 1/4 mile away.'],
['http://i.imgur.com/gmx8LVL.jpg','Lake front property is also available at our Pooler developments.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.146635, 32.788518]
},
"properties": {
'title': 'ESTILL FARM',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/GwbPN51.png','<p><b>Location: Estill, South Carolina</b></p>1,000 acres of premium farming land.'],
['http://i.imgur.com/GwbPN51.png','Estill farm also offers excellent commercial game hunting opportunities.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.610061, 32.750461]
},
"properties": {
'title': '301 FARM',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/GwbPN51.png','<p><b>Location: Screven County, Georgia</b></p> 1,000 acres along Highway 301.'],
['http://i.imgur.com/GwbPN51.png','Working Row crop with four (4) center pivot irrigation systems.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-85.118540, 30.927965]
},
"properties": {
'title': 'SPORTING RETREAT / BASCOM',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/GwbPN51.png','<p><b>Location: Bascom, Georgia</b></p>1,804 acres at the intersection of Country Road 244 and County Road 236 near Hilltonia, Georgia.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-105.071058, 39.033353]
},
"properties": {
'title': 'TRIPLE J RANCH',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ndrLGDs.jpg','<p><b>Location: Garfield County, Colorado</b></p>6100 acres of ranch land located 40 miles west of Aspen, eight miles south of Glenwood Springs and five miles south of New Castle in east-central Garfield County on the south side of Interstate 70.'],
['http://i.imgur.com/8rGf6yH.jpg','The property will remain privately owned, but the conservation easement prohibits any future development or subdivision of the property, allowing only for a few agricultural structures.'],
['http://i.imgur.com/chZ9oIt.jpg','The easement donation to Aspen Valley Lend Trust, Colorado’s oldest land trust, provides a timely example of a company deeply engaged in ecological practices for the benefit of their bottom line, while keeping an eye on the bigger picture.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-82.099009, 32.309491]
},
"properties": {
'title': 'ROLLING HILLS',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/zbXNpCr.jpg','<p><b>Location: Candler County, GA</b></p>Rolling hills acreage information.'],
['http://i.imgur.com/rSreZ33.jpg','Rolling hills features.'],
['http://i.imgur.com/fuGdhC8.jpg','Rolling hills features.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-84.490652, 34.508737]
},
"properties": {
'title': 'TALKING ROCK CREEK',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [35, 22], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/GwbPN51.png','<p><b>Location: Gilmer County, Georgia</b></p>1,000 acres surrounding Talking Rock Creek in Gilmer County, Georgia.']
]
}
}];
// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
var marker = e.layer;
var feature = marker.feature;
var images = feature.properties.images
var slideshowContent = '';
marker.setIcon(L.icon(feature.properties.icon));
for(var i = 0; i < images.length; i++) {
var img = images[i];
slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
'<img src="' + img[0] + '" />' +
'<div class="caption">' + img[1] + '</div>' +
'</div>';
}
// Create custom popup content
var popupContent = '<div id="' + feature.properties.id + '" class="popup">' +
'<h2>' + feature.properties.title + '</h2>' +
'<div class="slideshow">' +
slideshowContent +
'</div>' +
'<div class="cycle">' +
'<a href="#" class="prev">« Previous</a>' +
'<a href="#" class="next">Next »</a>' +
'</div>'
'</div>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 400
});
});
// Add features to the map
myLayer.setGeoJSON(geoJson)
.addTo(map);
myLayer.setFilter(function(f) {
return f.properties['Development'] === true;
});
//button stuff
$('.menu-ui a').on('click', function() {
// For each filter link, get the 'data-filter' attribute value.
var filter = $(this).data('filter');
$(this).addClass('active').siblings().removeClass('active');
myLayer.setFilter(function(f) {
// If the data-filter attribute is set to "all", return
// all (true). Otherwise, filter on markers that have
// a value set to true based on the filter name.
return (filter === 'all') ? true : f.properties[filter] === true;
});
return false;
});
//end button stuff
$('#map').on('click', '.popup .cycle a', function() {
var $slideshow = $('.slideshow'),
$newSlide;
if ($(this).hasClass('prev')) {
$newSlide = $slideshow.find('.active').prev();
if ($newSlide.index() < 0) {
$newSlide = $('.image').last();
}
} else {
$newSlide = $slideshow.find('.active').next();
if ($newSlide.index() < 0) {
$newSlide = $('.image').first();
}
}
$slideshow.find('.active').removeClass('active').hide();
$newSlide.addClass('active').show();
return false;
});
</script>
</body>
</html>
这是谁的地图，而在他们的例子中，他们似乎只是真正做聚类代码，他们以某种方式调用代码中的其余地图。
我尝试过他们的例子无济于事，它没有引起任何聚类，不幸的是我对Mapbox / leaflet / jquery的了解太少，无法真正解决这个问题。我不确定这是我的实现还是我的逻辑都错了。所以我真的需要一些帮助。任何事情都会非常感激。