2017-09-23 7 views
1

Ich habe Probleme herauszufinden, warum das Ereignis onClick innerhalb von jsFiddle nicht funktioniert. Der Code funktioniert gut im Browser, aber wenn ich versuche, ihn nach jsFiddle zu portieren, verliere ich die Möglichkeit, die onClick-Ereignisse auszulösen.onClick funktioniert nicht innerhalb von jsFiddle

Meine aktuellen Code ist der folgende:

Für die HTML:

<body> 

<button id="find-near-btn" onClick="getMylocation()"> 
    Find companies near me 
</button> 

<button id="mark-pos-btn" onClick="markMyPosition()"> 
    Mark my position 
</button> 

<div id="mymap"></div> 
<div id="output"></div> 

</body> 

Js:

function initmap(initialLat, initialLong){ 
    output.innerHTML += "<p>Initialized</p>"; 

    if(!initialLat || !initialLat.length){ 
     initialLat = 38.01693; 
    } 

    if(!initialLong || !initialLong.length){ 
    initialLong = -8.69475; 
    } 

    var mymap = this.mymap = L.map('mymap',{ 
    center: [initialLat, initialLong], 
    zoom: 15 
    }); 

    var osmUrl='http://tile.openstreetmap.org/{z}/{x}/{y}.png'; 
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; 

    L.tileLayer(osmUrl, osmAttrib).addTo(mymap); 
} 

function getMylocation(){ 

    output.innerHTML += "<p>Obtaining location.</p>"; 

    if(navigator.geolocation){ 

     navigator.geolocation.getCurrentPosition(function (position) { 

     var lat = position.coords.latitude; 
     var long = position.coords.longitude; 

     mymap.setView(new L.LatLng(lat, long), 15); 

    }, function (error) { 
     // Get information based on IP 
     getLatLongByIP(); 
    }); 
} 
} 

function getLatLongByIP() 
{ 
    $.get("http://ip-api.com/json", function(response) { 

    handleData(response.lat, response.lon); 
    }, "jsonp"); 
} 

function handleData(lat, long){ 
    mymap.setView(new L.LatLng(lat, long), 15); 
} 

function markMyPosition() 
{ 
    if(navigator.geolocation){ 

    navigator.geolocation.getCurrentPosition(function (position) { 

     var lat = position.coords.latitude; 
     var long = position.coords.longitude; 

     L.marker([lat, long]).addTo(mymap); 

    }, function (error) { 
     switch (error.code) { 
     case error.PERMISSION_DENIED: 
      output.innerHTML += "<p>User denied the request for Geolocation.</p>"; 
      break; 
     case error.POSITION_UNAVAILABLE: 
      output.innerHTML += "<p>Location information is unavailable.</p>"; 
      break; 
     case error.TIMEOUT: 
      output.innerHTML += "<p>The request to get user location timed out.</p>"; 
      break; 
     case error.UNKNOWN_ERROR: 
      output.innerHTML += "<p>An unknown error occurred.</p>"; 
      break; 
     } 
    }); 
} 
} 

initialLat = 38.01693; 
initialLong = -8.69475; 

initmap(initialLat, initialLong); 

Die Geige found here sein kann. Wenn ich auf einen der Knöpfe klicke, bekomme ich nichts. Irgendeine Idee, wie kann ich das schaffen?

+0

Wählen Sie unter "Lasttyp" die Option "kein Wickelkörper" –

Antwort

0

Sie müssen Ihren JS-Code so ändern, dass er sich im Tag <body> Ihrer Seite befindet. Verwenden Sie das kleine Zahnrad oben rechts im Javascipt-Bedienfeld und wählen Sie No wrap - in <body> unter Load type. I already tested this and it works.

Verwandte Themen