Mapbox地图样式的描述框 [英] Mapbox map styling for description box

问题描述

我是新手工作，他的前端技能，我正在设计我自己的网站学习。我试图使用Mapbox API实现地图，我无法获得我在地图中使用的描述框的样式。

I am newbie working on his front end skills and I am designing my own website to learn. I am trying to implement a map using the Mapbox API and I cannot get the styling of the description box I am using in the map.

链接到我的网站

地图在底部。现在我已经设法在地图上放置一个隐藏的描述框。当点击地图上的标记时，会移除隐藏属性，点击地图时会重新添加。

The map is at the bottom. Now I have managed to place a hidden description box on the map. When a marker on the map is clicked, the hidden property is removed and when the map is clicked it is added back again.

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

map.js
$ b

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': '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不是很好，我想把描述框放在右上角左上角。我已经成功地将它放在左下角，但每当框出现，地图底部也会出现一个空格。

The problem is I am not very good with CSS and I am trying to position the description box on the top left of top right. I have successfully placed it on the bottom left corner but whenever the box appears, a white space also appears on the bottom of the map.

除此之外，水平滚动的盒子，但我想要一个垂直滚动。所以我做了 overflow-x：hidden 和 overflow-y：visible 。

Other than this, there was a horizontal scroll on the box but I wanted a vertical scroll. So I made overflow-x: hidden and overflow-y: visible. The horizontal scroll is off now but I need to wrap the text to a vertical scroll.

而且我想我会使用 max-width ：25％，以便它在所有视图端口上都响应。有更好的方法吗？

And also I figured that I would use max-width: 25% so that it is responsive on all view ports. Is there a better way to do this?

如何完成这些任务？

推荐答案

为什么不使用默认控制层并创建自定义 L.Control ？这样，所有的定位都照顾你：

Why not use the default control layer and create a custom L.Control? Doing that, the positioning is all taken care of for you:

JS：

var MyCustomControl = L.Control.extend({
    options: {
        // Default control position
        position: 'bottomleft'
    },
    onAdd: function (map) {
        // Create a container with classname and return it
        return L.DomUtil.create('div', 'my-custom-control');
    },
    setContent: function (content) {
        // Set the innerHTML of the container
        this.getContainer().innerHTML = content;
    }
});

// Assign to a variable so you can use it later and add it to your map
var myCustomControl =  new MyCustomControl().addTo(map);

现在添加一些样式，注意：empty 伪选择器，如果容器为空，将隐藏容器。

Now add some styling, take note of the :empty pseudoselector which will hide the container if it's empty.

CSS：

.my-custom-control {
    padding:5px 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    border-radius: 5px;
}

.my-custom-control:empty {
    display: none;
}

现在您可以在您的clickhandlers中使用：

Now you can use that in your clickhandlers:

// 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的工作示例： http://plnkr.co/edit/wrlC7AAHLBWsDgzk8PRw?p=preview

Here's a working example on Plunker: http://plnkr.co/edit/wrlC7AAHLBWsDgzk8PRw?p=preview

这篇关于Mapbox地图样式的描述框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！