SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoiZWRkaWVsYXUiLCJhIjoiY2tvZHFhYmpsMDQzeDJvb2NwcHBhZXY1ZiJ9.CSKdFVgStY4RDSQtjYrPhQ';

const defCenter = [120.109233,30.246411];

const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/eddielau/cl8zkmdfc000l15qk3tr3bjyh', // style URL
    center: defCenter, // starting position [lng, lat]
    zoom: 9, // starting zoom
    language: 'zh',
    projection: 'globe', // display the map as a 3D globe
});

//标记
const marker = {
    pick: new mapboxgl.Marker({
        color: '#4264fb',
    }).setLngLat([0, 0]).addTo(map),
    search: new mapboxgl.Marker({
        color: '#a4a62d',
    }).setLngLat([0, 0]).addTo(map),
};

const pickBoard = document.querySelector('.board .pick')
const curLngLat = {
    lng: pickBoard.querySelector('input.lng'),
    lat: pickBoard.querySelector('input.lat'),
}

const searchBtn = document.querySelector('.board .search button');
searchBtn.onclick = e => {
    let search = document.querySelector('.board .search');
    let pos = {
        lng: search.querySelector('input.lng').value.trim(),
        lat: search.querySelector('input.lat').value.trim(),
    }
    if (pos.lng == '' || pos.lat == '') {
        alert('请输入地理坐标!');
        return false;
    }
    marker.search.setLngLat(pos);
    map.setCenter(pos)
}

map.on('click', e => {
    console.log('----- current position: ', e.lngLat);
    curLngLat.lng.value = e.lngLat.lng;
    curLngLat.lat.value = e.lngLat.lat;

    marker.pick.setLngLat(e.lngLat);
});

<div class="board">
    <div class="inline pick">
        <label>拾取坐标</label>
        <input type="text" class="lng" placeholder="经度(lng)"/>
        <input type="text" class="lat" placeholder="纬度(lat)"/>
    </div>

    <span class="divid"></span>
    
    <div class="inline search">
        <label>输入坐标</label>
        <input type="text" class="lng" placeholder="经度(lng)"/>
        <input type="text" class="lat" placeholder="纬度(lat)"/>
        <button>查询</button>
    </div>
</div>

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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-siz: 14px;
    line-height: 20px;
}
input, button {
    outline: none;
}

.board {padding: 5px 0;background-color: #fff;}
.inline {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.board input {width: 200px; margin: 0 5px;}

.board .divid {
    position: relative;
    display: block;
    height: 11px;
}
.board .divid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    transform: translate(-50%, -50%);
}
.board .pick label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    background-color: #4264fb;
    border-radius: 50%;
}
.board .search label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    background-color: #a4a62d;
    border-radius: 50%;
}
.board .search button {
    padding: 2px 4px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 4px;
    cursor: pointer;
}

#map {
    width: 100vw;
    height: 100vh;
}