用传单地图上的按钮更改标记文本

Question

我有一个带有标记的映射，由一个json文件生成，其中包含一个数值文本。对于标记生成，我使用Beaufify标记插件。这是我使用的代码的一部分

var map = L.map('mapid').setView([43.08, 12.34], 9);

for ( var i=0; i < markers.length; ++i ) {
    options = {
      isAlphaNumericIcon: true,
      text: markers[i].temperatura,
      iconSize: [28, 28],
      borderColor: markers[i].color,
      backgroundColor: markers[i].color,
      innerIconAnchor: [0, 4],
      textColor: '#000;'
    };
    var popup = L.popup({
      pane: 'fixed',
      className: 'popup-fixed',
      autoPan: false,
    }).setContent('my html code');

    L.marker( [markers[i].lat, markers[i].lng], {
        icon: L.BeautifyIcon.icon(options),
        virtual: true
    })
    .bindPopup(popup)
    .addTo( map );
}

我想用最好和最干净的方法，改变选项上的变量文本('markers[I].temperatura')，在按钮上使用onclick操作。

Answer 1

更新标记图标文本：

1）将标记列表保存到全局变量中，例如：

var markerObjects = [];
for (var i=0; i < markers.length; ++i ) {
    //...

    var markerObject = L.marker( [markers[i].lat, markers[i].lng], {
        icon: L.BeautifyIcon.icon(options),
        virtual: true
    })
    .bindPopup(popup)
    .addTo( map );
    markerObjects.push(markerObject);

}

2）单击按钮后，通过marker.seticon方法更新标记图标：

btn.onclick = () => {
    const selectedIndex = ...;  //get the selected index of marker 
    const selectedMarker = markerObjects[selectedIndex];
    let iconOptions = selectedMarker.options.icon.options; //get existing icon properties
    iconOptions.text = txtName.value; //update icon property
    selectedMarker.setIcon(L.BeautifyIcon.icon(iconOptions)); //update marker icon 
};

const map = L.map("map").setView([53.339025, 18.065818], 4);

L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const locations = [
  {
    name: "Oslo",
    lat: 59.923043,
    lng: 10.752839
  },
  {
    name: "Stockholm",
    lat: 59.339025,
    lng: 18.065818
  },
  {
    name: "Copenhagen",
    lat: 55.675507,
    lng: 12.574227
  },
  {
    name: "Berlin",
    lat: 52.521248,
    lng: 13.399038
  },
  {
    name: "Paris",
    lat: 48.856127,
    lng: 2.346525
  }
];

const markers = locations.map(location => {
  let options = {
    isAlphaNumericIcon: true,
    text: location.name,
    iconSize: [98, 28],
    textColor: "#000;"
  };
  let popup = L.popup({
    className: "popup-fixed",
    autoPan: false
  }).setContent(location.name);

  return L.marker([location.lat, location.lng], {
    icon: L.BeautifyIcon.icon(options),
    virtual: true
  })
    .bindPopup(popup)
    .addTo(map);
});

initControl();

function initControl() {
  

  let selectLocations = document.getElementById("selectLocations");
  let idx = 0;
  for (const marker of markers) {
    const option = document.createElement("option");
    option.value = idx;
    option.text = marker.options.icon.options.text;
    selectLocations.appendChild(option);
    idx++;
  }

  let txtName = document.getElementById("txtName");
  txtName.value = locations[selectLocations.selectedIndex].name;
  selectLocations.onchange = e => {
    txtName.value = markers[e.target.value].options.icon.options.text;
  };

  let btnUpdate = document.getElementById("btnUpdate");
  btnUpdate.onclick = () => {
    const selectedIndex = selectLocations.selectedIndex;
    const selectedMarker = markers[selectedIndex];
    let iconOptions = selectedMarker.options.icon.options; //get existing icon properties
    iconOptions.text = txtName.value; //update text property
    selectedMarker.setIcon(L.BeautifyIcon.icon(iconOptions)); //set icon 
  };
}

<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>


<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
/>
<link
  rel="stylesheet"
  href="https://marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.css"
/>

<script src="https://marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.js"></script>


<select id="selectLocations">
</select>
<input id="txtName" type="text"/>
<button id="btnUpdate">Update</button> 
<div id="map" style="height:410px; width:570px;"></div>