Javascript 描述框的映射框映射样式

我是一个新手，正在学习他的前端技能，我正在设计自己的网站来学习。我正在尝试使用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; 
}

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': 'large',
        'marker-symbol': 'circle-stroked',
        'marker-color': '#74DF00'
    }),
    title: 'Social Accounting System'
})
.on('click', function(){
    $("#description").removeClass('hidden')
        .empty()
        .append('Social Accounting System developed using Laravel + Bootstrap.Project includes different user roles performing a variety of operations such as transferring commodities and selling them on the market');
})
.addTo(map);

L.marker([22.281385, 114.171317], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'circle-stroked',
        'marker-color': '#74DF00'
    }),
    title: 'Social Accounting System'
})
.on('click', function(){
    $("#description").removeClass('hidden')
        .empty()
        .append('AngulAir was a demo project developed to show basic CRUD operations performed on the front end using AngularJS');
})
.addTo(map);

map.fitBounds([
    [22.281385, 114.171317],
    [51.081482, 10.300311]
]);

map.js

#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; 
}

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': 'large',
        'marker-symbol': 'circle-stroked',
        'marker-color': '#74DF00'
    }),
    title: 'Social Accounting System'
})
.on('click', function(){
    $("#description").removeClass('hidden')
        .empty()
        .append('Social Accounting System developed using Laravel + Bootstrap.Project includes different user roles performing a variety of operations such as transferring commodities and selling them on the market');
})
.addTo(map);

L.marker([22.281385, 114.171317], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'circle-stroked',
        'marker-color': '#74DF00'
    }),
    title: 'Social Accounting System'
})
.on('click', function(){
    $("#description").removeClass('hidden')
        .empty()
        .append('AngulAir was a demo project developed to show basic CRUD operations performed on the front end using AngularJS');
})
.addTo(map);

map.fitBounds([
    [22.281385, 114.171317],
    [51.081482, 10.300311]
]);

问题是我不太擅长CSS，我正试图将描述框放置在右上角的左上角。我已成功地将其放置在左下角，但每当该框出现时，地图底部也会出现一个空白

除此之外，盒子上有一个水平滚动条，但我想要一个垂直滚动条。因此，我将

overflow-x:hidden

和

overflow-y:visible

设置为可见。水平滚动现在已关闭，但我需要将文本包装为垂直滚动

我还想我会使用

最大宽度：25%

，这样它在所有视图端口上都能响应。有更好的方法吗

---

如何完成这些任务？

为什么不使用默认的控制层并创建一个自定义层？这样，定位就为您做好了：

JS:

现在添加一些样式，注意

：empty

伪选择器，如果容器为空，它将隐藏容器

CSS:

现在，您可以在ClickHandler中使用它：

// Set content on a marker click
marker.on('click', function () {
    myCustomControl.setContent('My awesome content');
});

// Remove content on map click
map.on('click', function () {
    myCustomControl.setContent('');
});

---

下面是一个关于Plunker的工作示例：

好的，我使用了一些代码并将控件放置到位。唯一的问题是，当我单击标记时，没有显示任何内容，因此我检查了控制台，它显示

TypeError:myCustomControl.setContent不是一个函数

。知道可能出了什么问题吗？是否已将控件分配给变量

myCustomControl

<代码>var myCustomControl=new myCustomControl（）.addTo（map）您不必将其命名为

myCustomControl

，当然，可以根据需要对其进行校准，您可以将其命名为

x

：

var x=new myCustomControl（）.addTo（map）

然后使用

x.setContent（'abc'）

；是的。我很快就意识到了这一点，我做到了<代码>var myCustomControl=map.addControl（新的MyControl（））仍然不起作用！：/这不起作用，方法

map.addControl

不返回任何内容，因此变量保持未定义状态。如果您习惯于使用

.addControl

，您可以这样做：

var myCustomControl=new myCustomControl（）然后执行：
map.addControl（myCustomControl）我只需像我的第一条评论那样在一行中完成：
var myCustomControl=new myCustomControl（）.addTo（map）
使用控件的
addTo
方法，这与使用map的
addControl
方法完全相同。好的。我将其更改为：
var myCustomControl=new MyControl（）.addTo（map）。还是不行。同样的问题。