如何对 MapBox javascript 中的第二个标记进行地理编码？答案

【问题标题】：How to geocode second marker in MapBox javascript?如何对 MapBox javascript 中的第二个标记进行地理编码？
【发布时间】：2021-04-17 21:55:16
【问题描述】：

我需要帮助使用地理编码在 javascript MapBox 地图上放置第二个标记。

我正在使用来自https://docs.mapbox.com/mapbox-gl-js/example/marker-from-geocode/ 的非常基本的示例此示例对新西兰惠灵顿进行地理编码并将其放在 MapBox 地图上。 如何使用此脚本获得第二个标记？

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a marker using a place name</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script src="https://unpkg.com/es6-promise@4.2.4/dist/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>

<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoic3F1ZWV6ZW9qIiwiYSI6ImNrbm04YjNrbTBvZmQycG1vd25wbGVnajgifQ.DnctRlqljTmn-joUThVpXA';
    var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
    mapboxClient.geocoding
        .forwardGeocode({
            query: 'Wellington, New Zealand',
            autocomplete: false,
            limit: 1
        })
        .send()
        .then(function (response) {
            if (
                response &&
                response.body &&
                response.body.features &&
                response.body.features.length
            ) {
                var feature = response.body.features[0];

                var map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/streets-v11',
                    center: feature.center,
                    zoom: 10
                });

                // Create a marker and add it to the map.
                new mapboxgl.Marker().setLngLat(feature.center).addTo(map);
            }
        });
</script>

</body>
</html>

如何添加第二个标记？对于新西兰的第二个城市，例如新西兰的奥克兰？

谢谢！

【问题讨论】：

标签： javascript html mapbox

【解决方案1】：

我花了几个小时琢磨，但这是我最终得到的解决方案。欢迎任何 cmets、建议和/或改进。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MapBox5</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script src="https://unpkg.com/es6-promise@4.2.4/dist/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>

<!-- From https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/ -->
<script>
    mapboxgl.accessToken = '<<myAccessToken>>';

    var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });

    //--- Declare an Array of Locations that Need Markers...
    var locations = ["123 Main St, Anytown, CA, 98765, United States",
                     "321 Front St, Anytown, CA, 98765, United States"];
                     
    //--- Declare Empty Array for Longitute-Latitude Centers...
    var lnglat = Array()
    
    //--- Draw the Map Centered...
    var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-70.070159, 40.155872],
            zoom: 10
        }); 
    
    //--- For Each Location Geocode the Address and Place Marker on Map...
    locations.forEach(myGeocoder);
    
    function myGeocoder(item, index) {
        
        mapboxClient.geocoding
        
        .forwardGeocode({
                query: item,
                autocomplete: false,
                limit: 1
            })

        .send()

        .then(function (response) {
            if (response &&
                response.body &&
                response.body.features &&
                response.body.features.length
                ) {
                //--- Get the Response from the MapBox Server...
                var feature = response.body.features[0];
                
                //--- Console Display Where We're at in the List...
                console.log(locations[index]);
                console.log(response.body.features[0].center);
                
                //--- Get Longitude-Latitute Center of this Location from Response...
                lnglat[index] = response.body.features[0].center

                // Create a marker and add it to the map.
                new mapboxgl.Marker().setLngLat(lnglat[index]).addTo(map);

                }
            });
                
    }

</script>

</body>
</html>

【讨论】：