javascript 相关问题

JavaScript（不要与Java混淆）是一种高级，动态，多范式，面向对象，基于原型的弱类型语言，用于客户端和服务器端脚本。它的主要用途是渲染和操作网页。使用此标记可以了解有关ECMAScript及其各种方言/实现的问题（不包括ActionScript和Google-Apps-Script）。

离开后视频停止自动播放 - Barbajs

我使用 barba.js 进行页面转换。我的公司页面上有视频元素，设置为自动播放、循环播放和静音。当我最初加载公司页面时效果很好。然而，当我...

javascript html css gsap barbajs

回答 1 投票 0

任务创建/更新后页面不刷新

我正在使用 Drizzle ORM 开发 Next.js 项目，我可以在其中创建和更新任务。提交任务表单后，我导航回主页，但未显示新的/更新的任务...

javascript typescript next.js drizzle

回答 1 投票 0

Next.js 与 Drizzle ORM：任务创建/更新后页面不刷新

我正在使用 Drizzle ORM 开发 Next.js 项目，我可以在其中创建和更新任务。提交任务表单后，我导航回主页，但未显示新的/更新的任务...

javascript typescript next.js drizzle

回答 1 投票 0

行程改变时如何清除折线？

我正在加载一个已加载地图和路线的页面。我们可以通过此表格更改出发地、目的地和运输方式： ... 我正在加载一个已加载地图和路线的页面。我们可以通过此表格更改出发地、目的地和运输方式： <div id="formulaire" class="box"> <input id="start" type="text" value="$4DTEXT($vo_personne.origine)" class="input my-1"> <input id="end" type="text" value="$4DTEXT($vo_personne.destination)" class="input my-1"> <div class="select my-1"> <select id="mode_transport"> <option value="DRIVING">Voiture</option> <option value="TRANSIT">Transports</option> </select> </div> <input type="submit" value="Actualiser le trajet" class="button my-1"> </div> 当我更改表单中的某些内容时，地图会发生变化，路线也会发生变化，但我没有找到清除上一张地图上的旧路线（折线）的方法。这是我的JS代码 <script> // onglets jquery UI $( function() { $( "#tabs" ).tabs(); } ); // Google Maps function initMap() { directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions : { // works only on the active path strokeColor: '#0047b3', strokeOpacity: 1.0, strokeWeight: 7 } }); directionsService = new google.maps.DirectionsService(); map = new google.maps.Map(document.getElementById("carte"), { zoom: 5, center: { lat : 46.603354, lng: 1.888334}, // france }); directionsRenderer.setMap(map); calculateAndDisplayRoute(directionsService, directionsRenderer); document.getElementById("mode_transport").addEventListener("change", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("start").addEventListener("change", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("end").addEventListener("change", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); }); } function calculateAndDisplayRoute(directionsService, directionsRenderer) { start = document.getElementById("start").value; end = document.getElementById("end").value; selectedMode = document.getElementById("mode_transport").value; directionsRenderer.setMap(map); directionsRenderer.setPanel(document.getElementById("itineraire")); directionsRequest = { origin: start, destination: end, travelMode: google.maps.TravelMode[selectedMode], provideRouteAlternatives: true, optimizeWaypoints: true, }; directionsService .route(directionsRequest) .then((response) => { directionsRenderer.setDirections(response); // console.log (response); // console.log (response.routes.length + ' routes'); // status = (response.status); if (status === 'OK') { // les routes trouvées for (var i = 0, len = response.routes.length; i < len; i++) { new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: i }); // route sélectionnée par défaut ? // lui attribuer un ID ? var polyline = response.routes[i] ; } console.log (polyline); } }) .catch((e) => window.alert("Directions request failed due to " + e)); } // création de la carte à l'ouverture de la page window.initMap = initMap; </script> 我是初学者，这是我的第一张地图，所以我没有找到更新折线的解决方案。新的很好，但最旧的应该删除或隐藏。我尝试通过添加 polyline.remove() 来更改事件侦听器，但它会产生此错误：未捕获（承诺中）ReferenceError：polyLinePath 未定义 document.getElementById("mode_transport").addEventListener("change", () => { polyline.remove(); calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("start").addEventListener("change", () => { polyline.remove(); calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("end").addEventListener("change", () => { polyline.remove(); calculateAndDisplayRoute(directionsService, directionsRenderer); }); 感谢您的帮助您需要保留对用于显示路线的 DirectionRenderer 对象的引用。全球范围内： let renderer = []; 然后，当您创建渲染器时，将它们推送到该数组上： for (var i = 0, len = response.routes.length; i < len; i++) { renderer.push(new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: i })); } 然后要从地图中删除路线，请将这些渲染器上的地图设置为 null： function removeOldRoutes() { for (var i=0; i < renderer.length; i++) { renderer[i].setMap(null); } renderer = []; } 概念证明小提琴代码片段 let map; let renderer = []; // Google Maps function initMap() { directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions : { // works only on the active path strokeColor: '#0047b3', strokeOpacity: 1.0, strokeWeight: 7 } }); directionsService = new google.maps.DirectionsService(); map = new google.maps.Map(document.getElementById("carte"), { zoom: 5, center: { lat : 46.603354, lng: 1.888334}, // france }); directionsRenderer.setMap(map); calculateAndDisplayRoute(directionsService, directionsRenderer); document.getElementById("mode_transport").addEventListener("change", () => { removeOldRoutes() calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("start").addEventListener("change", () => { removeOldRoutes() calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("end").addEventListener("change", () => { removeOldRoutes() calculateAndDisplayRoute(directionsService, directionsRenderer); }); } function removeOldRoutes() { for (var i=0; i < renderer.length; i++) { renderer[i].setMap(null); } renderer = []; } function calculateAndDisplayRoute(directionsService, directionsRenderer) { start = document.getElementById("start").value; end = document.getElementById("end").value; selectedMode = document.getElementById("mode_transport").value; directionsRenderer.setMap(map); directionsRenderer.setPanel(document.getElementById("itineraire")); directionsRequest = { origin: start, destination: end, travelMode: google.maps.TravelMode[selectedMode], provideRouteAlternatives: true, optimizeWaypoints: true, }; directionsService .route(directionsRequest) .then((response) => { directionsRenderer.setDirections(response); console.log (response); console.log (response.routes.length + ' routes'); status = (response.status); if (status === 'OK') { // les routes trouvées for (var i = 0, len = response.routes.length; i < len; i++) { console.log("rendering route "+i); renderer.push(new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: i })); } } }) .catch((e) => window.alert("Directions request failed due to " + e)); } // création de la carte à l'ouverture de la page window.initMap = initMap; /* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #carte { height: 80%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } <!doctype html> <html> <head> <title>StackSnippet</title> </head> <body> <div id="carte"></div> <div id="formulaire" class="box"> <input id="start" type="text" value="Paris" class="input my-1"> <input id="end" type="text" value="Marseille" class="input my-1"> <div class="select my-1"> <select id="mode_transport"> <option value="DRIVING">Voiture</option> <option value="TRANSIT">Transports</option> </select> </div> <input type="submit" value="Actualiser le trajet" class="button my-1"> </div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer ></script> </body> </html>

javascript google-maps google-maps-api-3

回答 1 投票 0

为什么回调函数显示“未定义”结果？

我一直在Postman中学习javascript测试脚本。在这里我只是学习回调函数，我想检查返回值是否显示在打印语句的最后一行，但是重新...

javascript function callback automated-tests postman

回答 1 投票 0

如何在 Cypress 中检查滚动到按钮？

我有一系列菜单项，可以滚动到页面上的不同元素。我想循环遍历每个项目并确保它滚动到页面上的正确元素。为此，我想...

javascript cypress

回答 1 投票 0

如何使用Bootstrap让eCharts工具提示在页面中完全可见

我试图为一些 eCharts 图表实现 Bootstrap 5.x 设计。但工具提示超出了页面范围，只有部分内容可见。代码太长，无法放入 stackoverflow 片段中...