相关疑难解决方法(0)

Mapbox地图样式描述框

我是新手,正在研究他的前端技能,我正在设计自己的网站来学习.我正在尝试使用Mapbox API实现地图,我无法获得我在地图中使用的描述框的样式.

链接到我的网站

地图位于底部.现在我设法在地图上放置一个隐藏的描述框.单击地图上的标记时,将删除隐藏属性,单击地图时会再次添加.

map.css

#map {
    width:100%;
    height: 500px;
}

pre#description{
    position: relative;
    top: -100px;
    left: 20px;
    padding:5px 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    border-radius: 5px;
    max-width: 25%;
    overflow-x: hidden;
    overflow-y: visible; 
}
Run Code Online (Sandbox Code Playgroud)

map.js

L.mapbox.accessToken = 'pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
    .setView([30, 60])
    .on('click', function(){
        $("#description").addClass('hidden');
    });

L.marker([28.612896, 77.177275], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'warehouse',
        'marker-color': '#2880CA'
    }),
    title: 'My Location'
})
.on('click', function(){
    $("#description").removeClass('hidden').empty().append('My Location');
})
.addTo(map);

L.marker([51.081482, 10.300311], {
    icon: L.mapbox.marker.icon({
        'marker-size': …
Run Code Online (Sandbox Code Playgroud)

html javascript css mapbox

3
推荐指数
1
解决办法
2132
查看次数

标签 统计

css ×1

html ×1

javascript ×1

mapbox ×1