Question

我在以下示例中遇到问题：

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    zoom: 5,
    center: [-77.04, 38.907],
});
map.on('load', function() {
        
        map.addLayer({
        "id": "places",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "properties": {
                        "id" : 1,
                        "name" :"My Icon",
                        "icon": "theatre"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.038659, 38.931567]
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "ferry-15",
            "icon-allow-overlap": true
        }
    });

        map.on('click', 'places', function (e) {
          var coordinates = e.features[0].geometry.coordinates.slice();
          var id = e.features[0].properties.id;
          var name = e.features[0].properties.name;
      
          while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
              coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
          }

          new mapboxgl.Popup()
              .setLngLat(coordinates)
              .setHTML("<table>" +
                    "<tr>" +
                        "<td>ID</td>" +
                        "<td>:</td>" +
                        "<td>"+id+"</td>" +
                    "</tr>" +
                    "<tr>" +
                        "<td>Name</td>" +
                        "<td>:</td>" +
                        "<td>"+name+"</td>" +
                    "</tr>" +
                    "</table>" +
                    "<button type='button' onclick='"+alert("Success")+"'>This Button</button>"

                )
              .addTo(map);
        });

        map.on('mouseenter', 'places', function () {
            map.getCanvas().style.cursor = 'pointer';
        });

        // Change it back to a pointer when it leaves.
        map.on('mouseleave', 'places', function () {
            map.getCanvas().style.cursor = '';
        });


});

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>WEBAPP</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map'></div>
</body>
</html>

我的问题是，我不知道这是错误，还是我写错了代码。我期望的结果是，当我单击“发运”图标，然后单击名为“此按钮”的按钮时，显示警告。但是在这段代码中，当我单击“运送”图标时，显示警告，然后弹出。尽管我已经在setHtml中设置了onclick事件。
我该如何解决？谢谢

Answer 1

您连接HTML字符串的方式存在问题。当您添加+alert("Success")+"

您实际上是在将函数警报呈现为HTML字符串之前调用

如果将其替换为

"<button type='button' onclick=alert('Success')>This Button</button>"

当字符串经过结构校正后，您将看到它的工作原理。

我建议您用模板文字https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals代替串联更干净

示例：

.setHTML(`<table> 
                    <tr>
                        <td>ID</td>
                        <td>:</td>
                        <td>${id}</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>:</td>
                        <td>${name}</td>
                    </tr>
                    </table>
                    <button type="button" onclick="alert('Success on ${name} ${id})">This Button</button>`)

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    zoom: 5,
    center: [-77.04, 38.907],
});
map.on('load', function() {
        
        map.addLayer({
        "id": "places",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "properties": {
                        "id" : 1,
                        "name" :"My Icon",
                        "icon": "theatre"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.038659, 38.931567]
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "ferry-15",
            "icon-allow-overlap": true
        }
    });

        map.on('click', 'places', function (e) {
          var coordinates = e.features[0].geometry.coordinates.slice();
          var id = e.features[0].properties.id;
          var name = e.features[0].properties.name;
      
          while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
              coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
          }

          new mapboxgl.Popup()
              .setLngLat(coordinates)
        .setHTML(`<table> 
                        <tr>
                            <td>ID</td>
                            <td>:</td>
                            <td>${id}</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>:</td>
                            <td>${name}</td>
                        </tr>
                        </table>
                        <button type="button" onclick="alert('Success on ${name}')">This Button</button>`)
               
              .addTo(map);
        });

        map.on('mouseenter', 'places', function () {
            map.getCanvas().style.cursor = 'pointer';
        });

        // Change it back to a pointer when it leaves.
        map.on('mouseleave', 'places', function () {
            map.getCanvas().style.cursor = '';
        });


});

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>WEBAPP</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map'></div>
</body>
</html>

如何在Mapbox GL JS的setHtml中设置事件？

1 个答案: