我正在研究 MapBoxgl，我想将餐厅的位置添加为标记。这是我的 index.html：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Com Viet</title> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script> <!-- CSS Stylesheet --> <link rel="stylesheet" href="/Styles/style.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet"> <!-- Mapbox API --> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' /> <!-- Mapbox Geocode --> <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script><link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/></head><body> <section id="map"> <h1>Find Us</h1> </section> <script src="app.js"></script></body></html>这是 app.js：mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';const map = new mapboxgl.Map({ container: 'map', //appears in the container with the ID map style: 'mapbox://styles/mapbox/streets-v11', center: [-0.1103, 51.5082], // Starting position [lng, lat] zoom: 11.89, // [Starting zoom]});// Custom Markervar marker = new mapboxgl.Marker() // initialize a new marker .setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates .addTo(map); // Add the marker to the map
2 回答
当年话下
TA贡献1890条经验 获得超9个赞
您的代码当前正在将标记添加到包含地图和标题“查找我们”的地图容器中。这意味着该位置被航向的高度所抵消。
<section id="map">
<h1>Find Us</h1>
</section>
要解决此问题，您应该像这样将地图移动到自己的位置<div>：
<section id="container">
<h1>Find Us</h1>
<div id="map"></div>
</section>
您的完整代码应如下所示：
mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';
const map = new mapboxgl.Map({
container: 'map', //appears in the container with the ID map
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.1103, 51.5082], // Starting position [lng, lat]
zoom: 11.89, // [Starting zoom]
});
// Custom Marker
var marker = new mapboxgl.Marker() // initialize a new marker
.setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
.addTo(map); // Add the marker to the map
// Geocode
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
mapboxgl: mapboxgl, // Set the mapbox-gl instance
marker: false, // Do not use the default marker style
placeholder: '',
proximity: {
longitude: -0.1103,
latitude: 51.5082
}
});
// Add the geocoder to the map
map.addControl(geocoder);
#map {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Com Viet</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/Styles/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">
<!-- Mapbox API -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Geocode -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>
<body>
<section id="container">
<h1>Find Us</h1>
<div id="map"></div>
</section>
<script src="app.js"></script>
</body>
</html>
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
除了帕特里克的回答，我遇到的一个问题是我在代码中以编程方式将地图框的宽度和高度设置为100vh：
dom: HTMLElement = this.elementRef.nativeElement;
elements = dom.querySelectorAll('.mapboxgl-canvas');
elements[0]['style']['height'] = '100vh';
我正在使用 Angular，因此您设置高度和宽度的代码可能会有所不同。当我将其切换到此问题时，它就100vh消失100%了。
添加回答
举报
0/150
提交
取消