如何對 MapBox javascript 中的第二個標記進行地理編碼？

Question

我需要幫助使用地理編碼在 javascript MapBox map 上放置第二個標記。

我正在使用來自https://docs.mapbox.com/mapbox-gl-js/example/marker-from-geocode/的非常基本的示例，此示例對新西蘭惠靈頓進行地理編碼並將其放在 MapBox map 上。 如何使用此腳本獲得第二個標記？

代碼如下所示：

<!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>

如何添加第二個標記？ 對於新西蘭的第二個城市，例如新西蘭的奧克蘭？

謝謝！

Answer 1

我花了幾個小時的時間，但這是我最終得到的解決方案。 歡迎任何意見、建議和/或改進。

<!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>

如何對 MapBox javascript 中的第二個標記進行地理編碼？

問題描述

1 個解決方案

解決方案1
0 2021-04-19 13:34:17

如何對 MapBox javascript 中的第二個標記進行地理編碼？

問題描述

1 個解決方案

解決方案1 0 2021-04-19 13:34:17

解決方案1
0 2021-04-19 13:34:17