Как установить событие внутри setHtml на Mapbox GL JS? - PullRequest
Новая
       7

Как установить событие внутри setHtml на Mapbox GL JS?

0 голосов
/ 13 ноября 2018

У меня проблемы со следующим примером: 

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>

Моя проблема в том, что я не знаю, что это ошибка, или я написал неправильный код.Результат, который я ожидал, был, когда я нажал на иконку корабля и нажал на кнопку «This Button», появилось предупреждение.Но в этом коде, когда я щелкнул значок корабля, появляется предупреждение, а затем всплывающее окно.хотя я уже установил событие onclick внутри setHtml.
Как мне это исправить?Спасибо

1 Ответ

0 голосов
/ 13 ноября 2018

Способ конкатенации вашей 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>
...