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

Question

I am having problems with following example :我在使用以下示例时遇到问题：

 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>

My problem is,i don't know this is bug,or i wrote the wrong code.我的问题是，我不知道这是错误，或者我写错了代码。 The result i was expecting was when i clicked ship icon,and click the button called "This Button" ,an alert showed .我期待的结果是当我单击船舶图标，然后单击名为“此按钮”的按钮时，显示警报。 But in this code,when i clicked ship icon,an alert shows,then popup .但是在此代码中，当我单击船舶图标时，会显示警报，然后弹出。 although i already set onclick event inside setHtml.虽然我已经在 setHtml 中设置了 onclick 事件。
How do i fix this ?我该如何解决？ Thank you谢谢

Answer 1

The way you're concatenation your HTML string is problematic.您连接 HTML 字符串的方式有问题。 When you add the +alert("Success")+"当您添加+alert("Success")+"

You're actually calling the function alert before rendering it as an HTML string您实际上是在将它呈现为 HTML 字符串之前调用函数 alert

if you replace it with如果你用

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

You'll see it works, as the string is construct corrected.你会看到它的工作原理，因为字符串被构造更正了。

I recommend you to replace the concatenation with template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals It is much cleaner我建议你用模板文字https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals替换连接它更干净

Example:例子：

.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 个解决方案

解决方案1
2 已采纳 2018-11-13 07:18:01

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-11-13 07:18:01

解决方案1
2 已采纳 2018-11-13 07:18:01