动态获取 MapBox 标记坐标答案

【问题标题】：Get MapBox Marker Coordinates Dynamically动态获取 MapBox 标记坐标
【发布时间】：2020-07-17 07:12:46
【问题描述】：

我是MapBox 的新手，这可能是一个非常简单的解决方案，我想要实现的是在我搜索@987654323 中的任何地址/位置时弹出标记的Coordinates @。 Marker 是可拖动的，它应该在移动时获取更新的坐标。

请看下面的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 50%; }
</style>
</head>
<body>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
    <link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
    type="text/css"
    />
    <!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>


    <style>
        .coordinates {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        bottom: 40px;
        left: 10px;
        padding: 5px 10px;
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        border-radius: 3px;
        display: none;
        }
        </style>
<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicHJpbmNla2FkaXdhciIsImEiOiJja2NuaXV6dTkwYm5yMnhzNmUwa3FjY2w1In0.G1hnzymI0eheZ76GLljEtQ';
    

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-96, 37.8], // starting position
        zoom: 2 // starting zoom
    });

    map.addControl(new mapboxgl.NavigationControl());

    var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        marker: {
        color: 'orange',
        draggable: true
        },
        mapboxgl: mapboxgl
        });
    
    map.addControl(geocoder);
    


</script>

</body>
</html>

请添加您的 Mapboxgl AccessToken。

【问题讨论】：

标签： javascript html mapbox mapbox-gl mapbox-marker

【解决方案1】：

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com

mapboxgl.accessToken = '';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-79.4512, 43.6568],
    zoom: 13
});

const geocoder = new MapboxGeocoder({
    mapboxgl: mapboxgl,                                                                               
    accessToken: mapboxgl.accessToken,
    marker: false
    })

geocoder.on('result', e => {
      const marker = new mapboxgl.Marker({
        draggable: true
      })
      .setLngLat(e.result.center)
      .addTo(map)
      marker.on('dragend',function(e){
        var lngLat = e.target.getLngLat();
        console.log(lngLat['lat'])
        console.log(lngLat['lng'])
      })
    })
map.addControl(geocoder)

【讨论】：

给你，这应该完全符合你的要求
@Prince Kadiwar 如果这是您正在寻找的或者您找到了替代解决方案，您介意分享一下吗？
这似乎是解决问题的方法，因为您无法收听geocoder.mapMarker 事件。
var lngLat = e.target.getLngLat(); 可能只是 var lngLat = marker.getLngLat();