Question

我一直在尝试从Leaflet代码修改html，但似乎innerHTML不起作用（我尝试使用click事件发出警报并且它有效），我的代码中是否有其他错误？，尝试了不同的解决方法但是到目前为止没什么可行的，谢谢！

var points = [
        [-23.695266, -70.421018],
        [-23.705082, -70.424633],
        [-23.706943, -70.423570],
        [-23.714329, -70.422545]
];

var icono = L.icon({
    iconUrl: "images/ico.png",
    iconSize: [25, 41]
})

var markersArray = [];

for (var i=0; i<points.length; i++) {
    markersArray[i] = new L.marker(points[i], {icon: icono}).addTo(map);
}


markersArray[0].on('click', function(e) {
        document.getElementById("name").innerHTML = "Antofa";
        document.getElementById("coordinates").innerHTML = "Latitud "+e.latlng["lat"]+", Longitud: "+e.latlng["lng"];
        document.getElementById("link_anchor").innerHTML = "Vid";
        document.getElementById("link_anchor").setAttribute("href", "https://www.youtube.com/watch?v=anlOJqnvB0c");

});

HTML

<div id="info">
        <h1 id="name"></h1>
        <h2 id="coordinates"></h2>
        <h3 id="link"><a href="" target="_blank" id="link_anchor"></a></h3>

Answer 1

问题中提供的代码工作正常：

＆＃13;

var points = [
  [-23.695266, -70.421018]
  /*,
    [-23.705082, -70.424633],
    [-23.706943, -70.423570],
    [-23.714329, -70.422545]*/
];

/*var icono = L.icon({
  iconUrl: "images/ico.png",
  iconSize: [25, 41]
})*/

var map = L.map("map").setView(points[0], 12);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var markersArray = [];

for (var i = 0; i < points.length; i++) {
  markersArray[i] = /*new*/ L.marker(points[i], {
    //icon: icono
  }).addTo(map);
}

markersArray[0].on('click', function(e) {
  document.getElementById("name").innerHTML = "Antofa";
  document.getElementById("coordinates").innerHTML = "Latitud " + e.latlng["lat"] + ", Longitud: " + e.latlng["lng"];
  document.getElementById("link_anchor").innerHTML = "Vid";
  document.getElementById("link_anchor").setAttribute("href", "https://www.youtube.com/watch?v=anlOJqnvB0c");
});

＆＃13;

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<div id="info">
  <h1 id="name"></h1>
  <h2 id="coordinates"></h2>
  <h3 id="link">
    <a href="" target="_blank" id="link_anchor"></a>
  </h3>
</div>

<div id="map" style="height: 100px;"></div>

＆＃13;

InnerHTML在Leaflet中不起作用

1 个答案: