第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

Mapbox 標(biāo)記在放大/縮小時(shí)移動(dòng)

Mapbox 標(biāo)記在放大/縮小時(shí)移動(dòng)

蝴蝶刀刀 2022-06-16 10:17:49
我正在研究 MapBoxgl，我想將餐廳的位置添加為標(biāo)記。這是我的 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 回答

?
當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊

您的代碼當(dāng)前正在將標(biāo)記添加到包含地圖和標(biāo)題“查找我們”的地圖容器中。這意味著該位置被航向的高度所抵消。


<section id="map">

    <h1>Find Us</h1>

</section>

要解決此問題，您應(yīng)該像這樣將地圖移動(dòng)到自己的位置<div>：


<section id="container">

  <h1>Find Us</h1>

  <div id="map"></div>

</section>

您的完整代碼應(yīng)如下所示：


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>


查看完整回答
反對(duì) 回復(fù) 2022-06-16
?
尚方寶劍之說(shuō)

TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊

除了帕特里克的回答，我遇到的一個(gè)問題是我在代碼中以編程方式將地圖框的寬度和高度設(shè)置為100vh：


  dom: HTMLElement = this.elementRef.nativeElement;

  elements = dom.querySelectorAll('.mapboxgl-canvas');

  elements[0]['style']['height'] = '100vh';

我正在使用 Angular，因此您設(shè)置高度和寬度的代碼可能會(huì)有所不同。當(dāng)我將其切換到此問題時(shí)，它就100vh消失100%了。


查看完整回答
反對(duì) 回復(fù) 2022-06-16
  • 2 回答
  • 0 關(guān)注
  • 730 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)