Маркеры Mapbox перемещаются при увеличении / уменьшении - PullRequest
Новая
       4

Маркеры Mapbox перемещаются при увеличении / уменьшении

0 голосов
/ 05 апреля 2020

Я работаю над MapBoxgl и хочу добавить местоположение ресторана в качестве маркера.

Вот мой индекс. 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>

Это приложение . 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>

Это первое изображение до увеличения Это второе изображение после увеличения

Я не уверен, что является причиной проблемы. Кроме того, окно поиска как-то кажется над картой, а не внутри нее.

1 Ответ

0 голосов
/ 06 апреля 2020

Ваш код в настоящее время добавляет маркер к контейнеру карты, который включает в себя как карту, так и заголовок «Найти нас». Это означает, что местоположение смещено на высоту заголовка. 

<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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...