放大/缩小时，地图框标记会移动

时间：2020-04-05 13:14:43

标签： javascript html css mapbox

我正在开发MapBoxgl，我想添加一家餐馆的位置作为标记。

这是我的index.html：

<!DOCTYPE html>
<html lang="en">

<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

// 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);

CSS为：

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




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 lang="en">

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

This is the first picture before zooming in This is the second picture after zooming in

我不确定是什么引起了问题。同样，搜索框似乎也位于地图上方，而不是位于地图内。

2 个答案:

答案 0 :(得分：0)

您的代码当前正在将marker添加到地图容器中，该容器同时包含地图和标题“查找我们”。这意味着该位置偏移了航向的高度。 

<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 lang="en">

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

免责声明：我在Mapbox工作

答案 1 :(得分：0)

除了 Patrick 的回答之外，我遇到的一个问题是我在代码中以编程方式将 mapbox 的宽度和高度设置为 100vh：

  dom: HTMLElement = this.elementRef.nativeElement;
  elements = dom.querySelectorAll('.mapboxgl-canvas');
  elements[0]['style']['height'] = '100vh';

我使用的是 Angular，因此您设置高度和宽度的代码可能会有所不同。当我将它从 100vh 切换到 100% 时，这个问题就消失了。

相关问题
最新问题