Javascript 带有数字的MapBox GL纯CSS标记_Javascript_Css_Mapbox_Mapbox Gl Js

Javascript 带有数字的MapBox GL纯CSS标记

javascript css mapbox

Javascript 带有数字的MapBox GL纯CSS标记,javascript,css,mapbox,mapbox-gl-js,Javascript,Css,Mapbox,Mapbox Gl Js,基于如何添加标记的定义我想制作一个纯css的泪滴标记，而不是图像。我还想对for循环索引中的标记进行编号。是否可以创建泪滴标记？有人能帮忙吗？我似乎无法从mapbox中找到一个好的例子 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='ini

基于如何添加标记的定义

我想制作一个纯css的泪滴标记，而不是图像。我还想对for循环索引中的标记进行编号。是否可以创建泪滴标记？有人能帮忙吗？我似乎无法从mapbox中找到一个好的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        .marker {
            background-image: url('mapbox-icon.png');
            background-size: cover;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
        .mapboxgl-popup {
            max-width: 200px;
        }
        .mapboxgl-popup-content {
            text-align: center;
            font-family: 'Open Sans', sans-serif;
        }

    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';

var geojson = {
    "type": "FeatureCollection",
    "features": [{
         "type": "Feature",
         "geometry": {
             "type": "Point",
             "coordinates": [-77.032, 38.913]
         },
         "properties": {
             "title": "Mapbox",
             "description": "Washington, D.C."
         }
     },
     {
         "type": "Feature",
         "geometry": {
         "type": "Point",
         "coordinates": [-122.414, 37.776]
        },
         "properties": {
             "title": "Mapbox",
             "description": "San Francisco, California"
         }
     }]
};

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-96, 37.8],
    zoom: 3
});

// add markers to map
geojson.features.forEach(function(marker) {

    // create a HTML element for each feature
    var el = document.createElement('div');
    el.className = 'marker';

    // make a marker for each feature and add it to the map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
            .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
        .addTo(map);
});

</script>

</body>
</html>


正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.马克{
背景图片：url（'mapbox-icon.png'）；
背景尺寸：封面；
宽度：50px；
高度：50px；
边界半径：50%；
光标：指针；
}
.mapboxgl弹出窗口{
最大宽度：200px；
}
.mapboxgl弹出内容{
文本对齐：居中；
字体系列：“开放式Sans”，无衬线；
}
mapboxgl.accessToken='pk.eyj1ijoizxhbxbszxmilcjhijoi2lqbmpqazdlbsdnrva284cwd3bm11byj9.V6Hg2oYJwMAxeoR9GEzkAA'；
var geojson={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-77.032，38.913]
},
“财产”：{
“标题”：“地图盒”，
“描述”：“华盛顿特区”
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-122.414，37.776]
},
“财产”：{
“标题”：“地图盒”，
“描述”：“加利福尼亚州旧金山”
}
}]
};
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v9',
中心：[-9637.8]，
缩放：3
});
//向地图添加标记
geojson.features.forEach（函数（标记）{
//为每个功能创建一个HTML元素
var el=document.createElement（'div'）；
el.className='marker'；
//为每个要素制作一个标记，并将其添加到地图中
新mapboxgl.标记（el）
.setLngLat（标记、几何、坐标）
.setPopup（新的mapboxgl.Popup（{offset:25}）//添加弹出窗口
.setHTML（“”+marker.properties.title+''+marker.properties.description+''））
.addTo（地图）；
});

您可以将任何您想要的HTML设置为标记，并按照您想要的方式设置样式：

mapboxgl.accessToken='pk.eyj1ijoid2hpdgwwwywdlcyisimeioijjamp0mwyjqwmhzzm2twzti2b21vdja3in0.vvrdwwqhoaeod3rffxe3s2q'；
var geojson={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-77.032，38.913]
},
“财产”：{
“标题”：“地图盒”，
“描述”：“华盛顿特区”
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-122.414，37.776]
},
“财产”：{
“标题”：“地图盒”，
“描述”：“加利福尼亚州旧金山”
}
}
]
};
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v9',
中心：[-9637.8]，
缩放：3
});
//向地图添加标记
forEach（函数（marker，i）{
//为每个功能创建一个HTML元素
var el=document.createElement（'div'）；
el.className='marker'；
el.innerHTML=''+（i+1）+''
//为每个要素制作一个标记，并将其添加到地图中
新mapboxgl.标记（el）
.setLngLat（标记、几何、坐标）
.setPopup（新的mapboxgl.Popup({
抵销：25
})//添加弹出窗口
.setHTML（“”+marker.properties.title+''+marker.properties.description+''））
.addTo（地图）；
});
正文{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
.marker{宽度：0；高度：0；}
.标记跨度{
显示器：flex；
证明内容：中心；
对齐项目：居中；
框大小：边框框；
宽度：30px；
高度：30px；
颜色：#fff；
背景：#693；
边框：实心2px；
边界半径：070%70%；
盒影：0 0 2px#000；
光标：指针；
变换原点：0；
变换：旋转（-135度）；
}
.marker b{transform:rotateZ（135度）}
.mapboxgl弹出窗口{
最大宽度：200px；
}
.mapboxgl弹出内容{
文本对齐：居中；
字体系列：“开放式Sans”，无衬线；
}
U先生，你是圣人！