Как добавить clicklistener, чтобы увеличить элементы на карте листовки? - PullRequest
Новая
       13

Как добавить clicklistener, чтобы увеличить элементы на карте листовки?

0 голосов
/ 16 февраля 2020

Для школьного задания я разработал базовую веб-страницу c со встроенной листовкой. Я пытаюсь добавить слушателей мыши к функциям увеличения и уменьшения. Я особенно заинтересован в добавлении слушателей для событий mouseover и click. Вот как выглядит мой html код: 

     <!DOCTYPE html>
<!DOCTYPE html>
<html xml:lang="de" lang="de"><head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
    <script src="stylesheet" href="https://unpkg.com/esri-leaflet@2.0.8"></script>
      <script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>

    <script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">


            </svg>
        </div>

        <div class="leaflet-pane leaflet-tooltip-pane"></div>
        <div class="leaflet-pane leaflet-popup-pane">
            <div class="leaflet-popup  leaflet-zoom-animated" style="opacity: 1; transform: translate3d(301px, 213px, 0px); bottom: -7px; left: -57px;">

                <div class="leaflet-popup-tip-container">
                    <div class="leaflet-popup-tip"></div>
                </div></div>
        </div>
        <div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(1.04805e+06px, 697379px, 0px) scale(4096);"></div>
    </div>
    <div class="leaflet-control-container" id="zoom">
        <div class="leaflet-top leaflet-left" >
            <a id="zoomIn" class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a>
        </div>
        <div class="leaflet-top leaflet-right"></div>
        <div class="leaflet-bottom leaflet-left"></div>
        <div class="leaflet-bottom leaflet-right">
            <div class="leaflet-control-attribution leaflet-control"><a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a></div>
        </div>
    </div>
    <div id="zoomIn" class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);">
        <div id="zoomIn" class="leaflet-pane leaflet-tile-pane">
            <div id="zoomIn" class="leaflet-layer " style="z-index: 1; opacity: 1;">
                <div id="zoomIn" class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4400/2686.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(124px, 4px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4400/2685.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(124px, -252px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4399/2686.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-132px, 4px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4401/2686.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(380px, 4px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4400/2687.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(124px, 260px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4399/2685.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-132px, -252px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4401/2685.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(380px, -252px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4399/2687.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-132px, 260px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://api.tiles.mapbox.com/v4/mapbox.streets/13/4401/2687.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(380px, 260px, 0px); opacity: 1;"></div>
            </div>
        </div>
        <div class="leaflet-pane leaflet-shadow-pane"><img src="https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png" class="leaflet-marker-shadow leaflet-zoom-animated" alt="" style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(-78224px, 9814px, 0px);"></div>
        <div class="leaflet-pane leaflet-overlay-pane">
            <svg pointer-events="none" class="leaflet-zoom-animated" width="720" height="480" viewBox="-60 -40 720 480" style="transform: translate3d(-60px, -40px, 0px);">
                <g>
                    <path class="leaflet-interactive" stroke="red" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f03" fill-opacity="0.5" fill-rule="evenodd" d="M0 0"></path>
                    <path class="leaflet-interactive" stroke="#3388ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#3388ff" fill-opacity="0.2" fill-rule="evenodd" d="M0 0"></path>
                </g>
            </svg>
        </div>
        <div class="leaflet-pane leaflet-marker-pane"><img src="https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(-78224px, 9814px, 0px); z-index: 9814;"></div>
        <div class="leaflet-pane leaflet-tooltip-pane"></div>
        <div class="leaflet-pane leaflet-popup-pane"></div>
        <div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(1.12658e+06px, 687812px, 0px) scale(4096);"></div>
    </div>
    <div class="leaflet-control-container">
           <a  id="zoomIn"  class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a>
        <div class="leaflet-top leaflet-right"></div>
        <div class="leaflet-bottom leaflet-left"></div>
        <div  class="leaflet-bottom leaflet-right">
            <div class="leaflet-control-attribution leaflet-control"><a id ="leafletBottomRight" href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a></div>
        </div>
    </div>
</div>
                            <script>

    var mymap = L.map('mapid').setView([52.515803012883595,13.38958740234375
          ], 15);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);
                                                                    var searchControl = new L.esri.Controls.Geosearch().addTo(mymap);

            var results = new L.LayerGroup().addTo(mymap);
              searchControl.on('results', function(data){
                results.clearLayers();
                for (var i = data.results.length - 1; i >= 0; i--) {
                  results.addLayer(L.   marker(data.results[i].latlng).addEventListener('click', function(e){
                  results.clearLayers();
                  }))
                }
              });

</script>

    <script type=text/javascript src="https://code.jquery.com/jquery-3.4.1.js"></script>
      <script src="scripttest.js" data-turbolinks-track="reload"></script>

 </body>
 </html>

Вот мой код js: 

zoomIn=document.getElementById("zoomIn")
zoomOut=document.getElementById("zoomOut")
mapid=document.getElementById("mapid")
elements=[]
elements.push(zoomIn)
elements.push(zoomOut)
elements.push(mapid)


for (let i = 0; i < elements.length; i++) {
 elements[i].addEventListener("mouseover", function(event) {
    overFunction(event);
});

 elements[i].addEventListener("click", function(event) {
    clickFunction(event);
});

}
function overFunction(event) {
 if(event.target.className==="leaflet-control-zoom-in"){
             mData ="hoveredOver,zoomIn,"+ Date.now() + ","+  event.clientX.toString() + "_" + 
 event.clientY.toString()+ ",,,,";

} 
 else if(event.target.className==="leaflet-control-zoom-out"){
             mData ="hoveredOver,zoomOut,"+ Date.now() + ","+  event.clientX.toString() + "_" + 
 event.clientY.toString()+ ",,,,";

} 
    else                  mData ="hoveredOver,"+event.target.id+","+ Date.now() + ","+  
 event.clientX.toString() + "_" + event.clientY.toString()+ ",,,,";

    console.log(mData)
}

function clickFunction(event) {
 if(event.target.className==="leaflet-control-zoom-in"){
             mData ="clickedOn,zoomIn,"+ Date.now() + ","+  event.clientX.toString() + "_" + 
  event.clientY.toString()+ ",,,,";

} 
 else if(event.target.className==="leaflet-control-zoom-out"){
             mData ="clickedOn,zoomOut,"+ Date.now() + ","+  event.clientX.toString() + "_" + 
 event.clientY.toString()+ ",,,,";

} 
 else                  mData ="clickedOn,"+event.target.id+","+ Date.now() + ","+  
event.clientX.toString() + "_" + event.clientY.toString()+ ",,,,";

 console.log(mData)
}

Мой mouseover событие прекрасно работает для карты и функций масштабирования. Однако событие click не срабатывает, когда я нажимаю на функции масштабирования. Итак, в принципе ничего не происходит, нет сообщений об ошибках, ничего. Я попытался добавить прослушиватель кликов непосредственно к этим элементам, таким как document.getElementByID("zoomIn").addEventlistener....... Но это также не вызвало события. Фактически, как вы можете видеть в коде. js, мне пришлось адресовать элементы по именам классов, чтобы иметь возможность отслеживать события в соответствующих функциях. js. Как новичок ie Я не совсем понимаю, что происходит, но я предполагаю, это потому, что у меня есть встроенный код из листовки. Есть ли обходные пути для добавления прослушивателя щелчка к этим функциям масштабирования?

...