Mapbox 标记在放大/缩小时移动
我正在研究 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 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
蝴蝶刀刀2回答
-
当年话下
您的代码当前正在将标记添加到包含地图和标题“查找我们”的地图容器中。这意味着该位置被航向的高度所抵消。<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 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// Geocodevar 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 mapmap.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> -
尚方宝剑之说
除了帕特里克的回答，我遇到的一个问题是我在代码中以编程方式将地图框的宽度和高度设置为100vh： dom: HTMLElement = this.elementRef.nativeElement; elements = dom.querySelectorAll('.mapboxgl-canvas'); elements[0]['style']['height'] = '100vh';我正在使用 Angular，因此您设置高度和宽度的代码可能会有所不同。当我将其切换到此问题时，它就100vh消失100%了。
随时随地看视频慕课网APP
相关分类
JavaScript