我的JSFiddle函数不起作用,单击按钮时的函数getAllLocations
不会被执行。你的帮助是合适的。
HTML
<div id="map" style="width: 800px; height:500px" align="center"></div>
<br>
<button type="button" onclick="getAllLocations();">GET ALL THE LOCATIONS</button>
<div>
<h3>Output Console</h3>
<textarea id="TextArea" rows="8" cols="80"></textarea>
<br>
</div>
JS
var map = L.map('map').setView([ 10.88869, 10.85878 ], 18);
L.tileLayer(
'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png',
{
maxZoom : 20,
attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
+ '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
+ 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id : 'examples.map-i86knfo3'
}).addTo(map);
var poly = L.polyline([], {
color : 'green'
});
poly.addTo(map);
map.on('click', function(e) {
poly.addLatLng(e.latlng);
//alert();
});
function getAllLocations(){
alert ("Test");
var locArray = poly.getLatLngs();
var area = document.getElementById('TextArea');
for(var i=0; i<locArray.length; i++){
var item2 = locArray[i];
var item3 = "" + item2;
var item4 = item3.split("(");
var item5 = item4[1].split(")")
//alert(item5[0]);
area.value += item5[0] + "\n";
}
}
答案 0 :(得分:1)
您的上下文正在被更改函数超出范围。
像这样定义你的函数,它将起作用,使函数是全局的。
getAllLocations = function (){
alert ("Test");
var locArray = poly.getLatLngs();
var area = document.getElementById('TextArea');
for(var i=0; i<locArray.length; i++){
var item2 = locArray[i];
var item3 = "" + item2;
var item4 = item3.split("(");
var item5 = item4[1].split(")")
//alert(item5[0]);
area.value += item5[0] + "\n";
}
}
答案 1 :(得分:0)
我已用此评论了您的问题。您的代码中仍然存在问题,但它将在jSFiddle上运行(包括脚本中的脚本)
你会收到这些错误:
Uncaught Error: Map container not found. leaflet.js:6
Uncaught TypeError: Cannot read property 'getLatLngs' of undefined
答案 2 :(得分:0)
您的功能定义实际上是可以的。你只需要改变LOAD TYPE
设置。像这样...... screenshot:load type setting
你的脚本被包装在onLoad中,getAllLocations
不是全局的。设置为no wrap
允许在全局范围内定义。